.blog,
.tmpl_type_category,
.tmpl_type_archive,
.tmpl_type_search {
	.interior {
		flex-wrap: wrap;
	}
	#skiptomaincontent {
		padding-top: 100px;
	}

	.blog-index {
		.blog-landing-posts {
			display: grid;
			grid-template-columns: 1fr;
			row-gap: 80px;
			@media (width >= 768px) {
				grid-template-columns: 1fr 1fr;
				column-gap: 40px;
			}
			@media (width >= 1024px) {
				grid-template-columns: 1fr 1fr 1fr;
				column-gap: 80px;
			}
		}
	}

	h2 {
		font-size: 18px;
		font-weight: var(--fw-medium);
		font-family: var(--primary-color);
		text-align: center;
		margin-top: 16px!important;
		margin-bottom: 20px;
		text-transform: none;


		a {
			text-decoration: none;
			color: var(--text-color);
			transition: all .3s;
			&:hover {
				color: var(--primary-accent);
			}
		}
	}

	.post-snippet {

		/* padding-bottom: 100px; */

		/* border-bottom: 1px solid var(--primary-color); */
		/* Tablet Styles */

		.thumb {
			width: 100%;
			position: relative;
			display: block;

			img {
				width: 100%;
				height: 100%;
				aspect-ratio: 187 / 125;
				object-fit: cover;
				object-position: center top;
				position: relative;
			}
		}

		.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;
	}
}

.tmpl_type_single {
	.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);
					}
				}
			} */
		}
	}

	.post-featured-image {
		img {
			width: 100%;
			height: auto;
		}
	}

	.blog-title-container {
		padding-top: 100px;
	}
	.blog-title {
		line-height: 1.2em;
		margin-top: 15px;
		margin-bottom: 15px;
		padding-left: 120px;
		padding-right: 120px;
		text-align: center;
		width: 100%;
		color: var(--text-color);
		/*
@media (width >= 768px) {
			padding-left: 190px;
			padding-right: 190px;
		} */
	}

	.button {
		text-decoration: none;
	}

	.meta-data {
		padding-bottom: 70px;
		text-align: center;
	}

	/* .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: space-between;
		align-items: center;
		padding: 6px 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: 50;
		background: var(--primary-color);
		margin: 0;
		list-style: none;
		padding: 20px 0;
		margin-top: -10px;
		text-align: left;
		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;
			list-style: none;
		}

		li {
			padding: 5px 20px;

			a {
				text-transform: uppercase;
				text-decoration: none;
				color: var(--text-color);
			}
		}
	}
}

.blog-search {
	position: relative;
	margin-bottom: 40px;
	width: 100%;
	display: flex;

	@media (width >= 768px) {
		margin-bottom: 0;
	}

	form {
		display: flex;
		align-items: center;
		flex-grow: 1;
		padding: 8px 10px;
		background-color: var(--light-alt);

		input[type="text"] {
			font-size: 14px;
			border: none;
			background: transparent;
			/* color: rgb(255, 255, 255 / .5); */
			outline: none;
			width: 100%;

			&::placeholder {
				font-weight: var(--fw-normal);
				color: var(--text-color);
			}
		}

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

	.search-icon {
		display: flex;
		align-items: center;
		background-color: var(--light-alt);
		border-left: 10px solid var(--light-color);
		padding: 0 10px;
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		svg {
			height: 23px;
			width: auto;
			line-height: 1em;


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

.pagination {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	position: relative;
	width: 100%;
	margin-top: 60px;
	padding-top: 34px;
	font-weight: var(--fw-medium);
	border-top: 1px solid var(--text-color);
	@media (width >= 768px) {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 60px;
	}
	@media (width >= 1024px) {
		font-size: 20px;
	}
	.pagination-back {
		text-transform: uppercase;
		margin-bottom: 16px;
		text-align: center;
		@media (width >= 768px) {
			margin-bottom: 0;
			text-align: left;
		}
		a {
			text-decoration: none;
			color: var(--text-color);
			&:hover {
				color: var(--primary-accent);
				svg {
					path {
						fill: var(--primary-accent);
					}
				}
			}
		}
		svg {
			margin-right: 6px;
			width: 13px;
			height: 13px;
			path {
				fill: var(--text-color);
			}
		}
	}
	.prev-blog-button,
	.next-blog-button {
		text-transform: uppercase;
		display: flex;
		align-items: center;
		text-decoration: none;
		svg {
			height: 20px;
			width: auto;
			path, polygon {
				fill: var(--text-color);
			}
		}
	}
	.prev-blog-button {
		svg {
			margin-right: 6px;
			transform: rotate(180deg);
		}
	}
	.next-blog-button {
		svg {
			margin-left: 6px;
		}
	}
	&.pagination-header {
		flex-direction: row;
		.pagination-navigation {
			justify-content: space-between;
			width: 100%;
			padding-top: 50px;
			position: relative;
			@media (width >= 768px) {
				padding-top: 0;
			}
			.button {
				@media (width >= 768px) {
					width: 100px;
				}
			}
			.prev-blog-button, .next-blog-button {
				@media (width < 768px) {
					top: 0;
				}
			}
			.prev-blog-button {
				order: 1;
			}
			.next-blog-button {
				order: 3;
			}
		}
	}
	.tmpl_type_index {
		@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;
		@media (width >= 768px) {
			order: 1;
			margin: 0;
		}
		.button {
			@media (width >= 768px) {
				min-width: 200px;
			}
		}
		/* svg {
			width: 11px;
			height: 11px;
			margin-right: 13px;
		}
		@media (width >= 768px) {
			padding-top: 0;
		}
		&:hover, &:active, &:focus {
			svg {
				path {
					fill: $secondaryAlt;
				}
			}
		}
		&:before {
			display: none;
		} */
	}
	.pagination-navigation {
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 20px;
		order: 1;
		text-align: center;
		@media (width >= 768px) {
			order: 2;
			column-gap: 40px;
		}
		a {
			text-decoration: none;
			color: var(--text-color);
			&:hover {
				color: var(--primary-accent);
				svg {
					path, polygon {
						fill: var(--primary-accent);
					}
				}
			}
		}
		.button {
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				display: flex;
				svg {
					width: 14px;
					height: auto;
					path {
						fill: var(--light-color);
					}
				}
			}
		}
	}
	.prev-blog-button {
		margin-right: 5px;
		position: relative;
		@media (width >= 768px) {
			margin-bottom: 0;
		}
		.text-container {
			margin-left: 5px;
		}
	}
	.next-blog-button {
		margin-left: 5px;
		position: relative;
		@media (width >= 768px) {
			margin-bottom: 0;
		}
		.text-container {
			margin-right: 5px;
		}
	}
	.button {
		width: 140px;
		padding: 14px 10px 12px;
		@media (width >= 768px) {
			width: 170px;
			padding: 14px 30px 12px;
		}
	}
}