.projects{
	.filter{
		float: none;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin: 0 0 28px;

		a{
			display: block;
			padding: 8px 0px;
			border-bottom: 1px solid transparent;
			font-size: 16px;
			font-weight: 700;
			color: var(--wp--preset--color--gray-400);
			text-decoration: none;

			&:hover{
				color: var(--wp--preset--color--primary-900);
			}

			&.active{
				border-color: var(--wp--preset--color--primary-900);
				color: var(--wp--preset--color--primary-900);
			}
		}
	}
	.listing{
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		grid-auto-rows: 1fr;
		gap: 24px;

		@media (max-width: 991px){
			gap: 12px;
		}

		@media (max-width: 767px){
			grid-template-columns: repeat( 2, 1fr );
			grid-auto-flow: dense;
		}

		@media (max-width: 575px){
			grid-template-columns: 1fr;
		}

		a.item{
			overflow: hidden;
			position: relative;
			aspect-ratio: 1;
			min-height: 400px;
			font-size: 30px;
			line-height: 1.25;
			color: #fff;
			text-decoration: none;

			@media (max-width: 1439px){
				min-height: 345px;
				font-size: 22px;
			}

			@media (max-width: 1199px){
				min-height: 280px;
				font-size: 18px;
			}

			@media (max-width: 991px){
				min-height: 220px;
			}

			@media (min-width: 576px){
				&:nth-child( 8n + 1 of :not([hidden]) ){
					aspect-ratio: auto;
					grid-column: span 2;
				}
				&:nth-child( 8n + 7 of :not([hidden]) ){
					aspect-ratio: auto;
					grid-column: span 2;
					grid-row: span 2;
				}
			}

			&::before{
				content: '';
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
			}

			img{
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform .6s ease;
			}
			&:hover img{
				transform: scale(1.1);
			}
			.title{
				position: absolute;
				z-index: 3;
				top: 32px;
				left: 32px;
				right: 32px;

				@media (max-width: 991px){
					top: 20px;
					left: 20px;
					right: 20px;
				}
			}
			.button{
				position: absolute;
				z-index: 3;
				bottom: 32px;
				left: 32px;
				width: 48px;
				aspect-ratio: 1;
				background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14"><path stroke="%23011d3c" stroke-width="1.5" d="M0 6.53033h12.5m0 0-6-6m6 6-6 5.99997"/></svg>') center no-repeat;

				@media (max-width: 1199px){
					width: 34px;
					background-size: 11px 11px;
				}

				@media (max-width: 991px){
					bottom: 20px;
					left: 20px;
				}
			}
		}
	}
}