.blog,
.tmpl_type_category,
.tmpl_type_archive,
.tmpl_type_search {
	.interior {
		flex-wrap: wrap;
	}

	h2 {
		font-size: 18px;
		line-height: 1.22em;
		letter-spacing: 0.05em;
		font-weight: var(--fw-medium);
		font-family: var(--primary-font);
		margin-top: 0;
		a {
			text-decoration: none;
			font-weight: var(--fw-medium);
		}
	}

	.blog-index {
		.contain {
			@media (width >= 768px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 20px;
			}

			@media (width >= 1024px) {
				grid-template-columns: 1fr 1fr 1fr;
				column-gap: 35px;
			}

		}
	}

	.post-snippet {
		padding-bottom: 40px;
		text-align: center;
		@media (width >= 768px) {
			padding-bottom: 70px;
		}
		.thumb {
			width: 100%;
			position: relative;
			display: block;
			margin-bottom: 18px;
			@media (width >= 768px) {
				height: 290px;
			}
			img {
				width: 100%;
				height: auto;
				position: relative;
				@media (width >= 768px) {
					height: 100%;
                    object-position: center;
                    object-fit: cover;
				}
			}
		}

		.excerpt {

			/* Tablet Styles */
			@media (width >= 768px) {
				width: 100%;
			}

			p {
				margin-top: 0;
			}
		}
	}

	.date {
		font-size: 21px;
		text-transform: uppercase;
		color: var(--primary-color);
		text-align: right;
		margin-bottom: 16px;
	}

	.meta-data {
		font-size: 13px;
		/* margin-bottom: 10px; */
		font-style: italic;
		color: var(--tertiary-alt);

		a {
			color: var(--tertiary-alt);
		}
	}

	.more {
		position: relative;
		display: flex;
		align-items: center;
	}

	.pagination {
		margin-top: 10px;
		grid-column: 1 / -1;
		padding-top: 40px;
	}
}

.tmpl_type_single {
	.page-title {
		h1 {
			margin-bottom: 0;
		}
	}
	.pagination-header {
		position: relative;

		a {
			display: flex;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);

			&[rel="next"] {
				right: 0;
			}

			&[rel="prev"] {
				left: 0;
			}

			/* svg {
				path {
					transition: fill .3s, stroke .3s;
				}
			}
			&:hover {
				svg {
					path {
						fill: var(--primary-accent);
						stroke: var(--primary-accent);
					}
				}
			} */
		}
	}
	.meta-data {
		margin-bottom: 1em;
	}

	.post-featured-image {
		position: relative;
		/* margin-top: 55px; */
		margin-bottom: 35px;
		max-width: 100%;
		max-width: 1000px;
		&:before {
			content: "";
			width: calc(100vw - 20px);
			height: 60%;
			background-color: var(--primary-highlight);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: absolute;
			z-index: -1;
			opacity: 0.5;
		}
		img {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
			height: auto;
		}
	}


	.blog-title {
		line-height: 1.2em;
		margin-top: 15px;
		margin-bottom: 15px;
		padding-left: 120px;
		padding-right: 120px;
		text-align: center;
		width: 100%;
	}

	.button {
		text-decoration: none;
	}

	/* .post-nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	} */
}


.search-bar {
	width: 100%;
	margin-bottom: 40px;

	/* Tablet Styles */
	@media (width >= 768px) {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.blog-dropdowns {

		/* Tablet Styles */
		@media (width >= 768px) {
			display: flex;
		}
	}
}

.cat-select,
.archive-select {
	position: relative;

	/* Comment to make full width */
	.blog-dropdown-options {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16px 30px;
		margin-bottom: 10px;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-bottom: 0;
			margin-right: 20px;
			width: 200px;
		}

		/* Desktop Styles */
		/* @media (width >= 1024px) {
			min-width: 230px;
		} */

		&:after {
			transform: rotate(90deg);
		}

		i {
			font-size: 30px;
			line-height: 1em;
			color: var(--primary-color);
		}

		.arrow-down {
			display: flex;

			svg {
				width: 10px;
				height: auto;
				transform: rotate(90deg);
			}
		}
	}

	.cats {
		position: absolute;
		display: none;
		z-index: 100;
		background: var(--primary-color);
		margin: 0;
		list-style: none;
		padding: 15px 0;
		margin-top: -10px;
		text-align: center;
		width: 100%;

		/* Uncomment below to make full width */
		/* left: 0; 
		margin-top: 20px; */
		/* Tablet Styles */
		@media (width >= 768px) {
			margin-top: 0;
			width: 200px;
		}

		/* Desktop Styles */
		/* @media (width >= 1024px) {
			width: 230px;
		} */

		.cats-list {
			margin: 0;
		}

		li {
			padding: 5px 20px;
			list-style: none;
			margin-bottom: 0;
			text-align: left;
			a {
				/* text-transform: uppercase; */
				text-decoration: none;
				color: var(--light-color);
				&:hover {
					color: var(--primary-alt);
				}
			}
		}
	}
}

.blog-search {
	border: none;
	position: relative;
	margin-bottom: 40px;
	background-color: var(--primary-highlight);
	border-radius: 100px;
	/* Tablet Styles */
	@media (width >= 768px) {
		margin-bottom: 0;
	}

	form {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		padding: 15px 28px;
		input[type="text"] {
			font-size: 15px;
			font-family: var(--primary-font);
			letter-spacing: 0.05em;
			border: none;
			background: transparent;
			/* color: rgb(255, 255, 255 / .5); */
			outline: none;
			width: 80%;

			/* Tablet Styles */
			@media (width >= 768px) {
				width: 274px;
			}

			&::placeholder {
				font-weight: var(--fw-medium);
				color: rgb(from var(--text-color) r g b / 0.5);
			}
		}

		input[type="submit"] {
			width: 18px;
			height: 18px;
			min-width: 18px;
			padding: 0;
			border: none;
			z-index: 1;
			background: transparent;
		}
	}

	.search-icon {
		&:hover {
			svg {
				path {
					fill: var(--primary-alt);
				}
			}
		}
		svg {
			height: 18px;
			width: auto;
			line-height: 1em;
			position: absolute;
			right: 28px;
            top: 50%;
            transform: translateY(-50%);

			path {
				fill: var(--primary-color);
			}
		}
	}
}

.pagination {
	display: flex;
	flex-direction: column;
	/* margin-bottom: 30px; */
	position: relative;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 85px;
	border-top: 1px solid var(--light-alt);
	padding-top: 20px;
	/* Tablet Styles */
	@media (width >= 768px) {
		margin-top: 55px;
		padding-top: 40px;
		flex-direction: row;
		justify-content: space-between;
	}

	.button {
		background-color: transparent;
		color: var(--primary-color);
		font-weight: var(--fw-medium);
		padding: 0;
		svg {
			g, path {
				fill: var(--primary-color);
				transition: all 0.3s;
			}
		}
		&:hover {
			color: var(--secondary-color);
			svg {
				g, path {
					fill: var(--secondary-color);
				}
			}
		}
		&:before {
			display: none;
		}
	}

	&.pagination-header {
		display: block;
		background-color: transparent;
		margin-top: 0;
		padding-top: 0;
		border: none;
		.blog-title {
			padding: 0;
			width: 100%;
			margin-bottom: 10px;
			text-align: center;
		}

		.pagination-navigation {
			display: block;
		}

		/* flex-direction: row;
		

		.pagination-navigation {
			justify-content: space-between;
			width: 100%;

			.button {

				@media (width >= 768px) {
					width: 100px;
				}
			}

			.prev-blog-button {
				order: 1;
			}

			.next-blog-button {
				order: 3;
			}
		} */
	}

	.tmpl_type_index {

		/* Tablet Styles */
		@media (width >= 768px) {
			justify-content: flex-end;
		}
	}

	.blog-title {
		order: 2;
		text-align: center;
	}

	.main-blog-button {
		text-align: center;
		margin: 0 auto;
		order: 2;

		/* Tablet Styles */
		@media (width >= 768px) {
			order: 1;
			margin: 0;
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			padding-top: 40px;
			transform: translateY(-50%);
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px 20px;
			width: fit-content;
			margin-left: auto;
            margin-right: auto;
			@media (width >= 768px) {
				padding-top: 0;
				padding-bottom: 0;
			}
		}

		.icon {
			display: flex;
		}

		svg {
			width: 20px;
			height: auto;
			margin-right: 10px;
		}

		/* 
		
@media (width >= 768px) {
			padding-top: 0;
		}
		&:hover, &:active, &:focus {
			svg {
				path {
					fill: var(--secondary-alt);
				}
			}
		}
		&:before {
			display: none;
		} */
	}

	.pagination-navigation {
		display: flex;
		align-items: center;
		justify-content: center;
		order: 1;
		text-align: center;
		flex-direction: column;

		/* Tablet Styles */
		@media (width >= 768px) {
			order: 2;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: 'b-prev b-next';
			width: 100%;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px 20px;
			@media (width >= 768px) {
				padding: 0;
			}
			span {
				/* display: flex; */

				svg {
					width: 12px;
					height: auto;
				}
			}
		}
	}

	.prev-blog-button {
		margin-right: 5px;
		/* order: 1; */
		position: relative;
		grid-area: b-prev;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-right: auto;
			margin-left: 0;
		}

		.text-container {
			margin-left: 10px;
		}
	}

	.next-blog-button {
		margin-left: 5px;
		/* order: 2; */
		position: relative;
		grid-area: b-next;

		/* Tablet Styles */
		@media (width >= 768px) {
			margin-right: 0;
			margin-left: auto;
		}

		.text-container {
			margin-right: 10px;
		}
	}

	.button {
		/* font-size: 12px; */
		/* Tablet Styles */
		@media (width >= 768px) {
			/* font-size: 16px; */
		}
	}
}