@layer components{
	.post-list-section{
		padding-block: var(--section-padding);

		header{
			margin-bottom: var(--spacer);

			.row{
				margin-bottom: calc(var(--spacer) * 1.5);
				padding-bottom: calc(var(--spacer) * 1.5);
				border-bottom: 1px solid rgba(var(--color-gray-25));
			}
		}

		h2{
			color: rgba(var(--color-secondary));
			margin: 0;

			@container content (max-width: 768px){
				margin-bottom: var(--spacer);
			}
		}
	}

	.search-posts{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		column-gap: calc(var(--spacer) * .5);

		@container content (max-width: 900px){
			display: block;
		}

		> div{
			display: flex;
			flex-grow: 1;
			position: relative;

			.clear-search{
				position: absolute;
				display: none;
				right: 40px;
				top: 9px;
			}
		}

		[type="search"]{
			flex-grow: 1;
			padding: .666em;

			&:not(:placeholder-shown){
				padding-right: calc(var(--spacer) * 1.25);

				+ .clear-search{
					display: block;
				}
			}
		}

		[type="submit"]{
			font-family: var(--font-icon);
			font-weight: 300;
			border-radius: 0;
			padding: .15em .3em 0;
		}
	}

	.toggle-filters{
		font-weight: 600;
		display: none;

		@container content (max-width: 900px){
			display: block;
		}

		div{
			display: flex;
			justify-content: space-between;

			&:after{
				content: '\2b';
				font-family: var(--font-icon);
			}

			.open &:after{
				content: '\f068';
			}
		}

		span:before{
			content: '\e0ae\00a0';
			font-family: var(--font-icon);
		}
	}

	.filter-posts{
		display: flex;
		column-gap: var(--column-gap);
		align-items: flex-end;

		@container content (max-width: 900px){
			--row-gap: var(--spacer);

			flex-direction: column;
			align-items: stretch;
			row-gap: var(--row-gap);
			max-height: 0;
			overflow: hidden;
			transition: max-height .3s;

			> *:first-child{
				margin-top: calc(var(--section-padding) * .5);
			}
		}

		> * {
			flex: 1;
		}

		[type="reset"]{
			flex: 0;
			position: relative;
			bottom: 11px;
			background: none;

			@container content (max-width: 900px){
				position: static;
			}
		}

		[type="submit"]{
			flex: 0;
			white-space: nowrap;
		}
	}

	.no-results h3{
		font-weight: 600;
	}

	.post-list{
		--color-link: var(--color-text);
		--color-link-hover: var(--color-text);
		--color-link-visited: var(--color-text);
		--column-gap: calc(var(--spacer) * 2);
		--row-gap: calc(var(--spacer) * 3);

		padding-top: calc(var(--spacer) * 2.5);

		@container content (min-width: 600px) and (max-width: 900px){
			.post-item{
				--flex-width: calc(1 / 2 * 100%);
			}
		}

		img{
			margin-bottom: var(--spacer);
			display: block;
			width: 100%;

			@container content (max-width: 768px){
				width: 100%;
			}
		}

		h3{
			font-size: 1.25em;
			margin-bottom: calc(var(--spacer) * .5);

			@container content (max-width: 768px){
				font-weight: 500;
				font-size: 1.111em;
			}
		}
	}
}