.projekte{
	.filter{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin: 0 0 72px;

		a{
			text-decoration: none;
			padding: 10px 20px;
			border: 2px solid var(--wp--preset--color--farbe-3);
			color: var(--wp--preset--color--farbe-3);
			transition: all .3s ease;
			transition-property: background-color, color;

			@media (max-width: 575px){
				padding: 5px 10px;
			}

			&:hover,
			&.active{
				background-color: var(--wp--preset--color--farbe-3);
				color: #fff;
			}
		}
	}

	.listing{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 70px calc( var( --innerColumn, 100px ) + var(--bs-gutter-x) * 2 );

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

		@media (max-width: 575px){
			gap: 40px;
		}
	}

	.project-item{
		min-width: var(--width) !important;
		max-width: var(--width) !important;

		&.size-square{
			--width: min( var( --innerColumn, 100px ) * 5 + var(--bs-gutter-x) * 4, 100% );
		}
		&.size-landsacape{
			--width: min( var( --innerColumn, 100px ) * 6 + var(--bs-gutter-x) * 5, 100% );
		}
		&.size-portrait-small{
			--width: min( var( --innerColumn, 100px ) * 4 + var(--bs-gutter-x) * 3, 100% );
		}
		&.size-portrait-big{
			--width: min( var( --innerColumn, 100px ) * 5 + var(--bs-gutter-x) * 4, 100% );
		}

		@media (max-width: 991px){
			.icon{
				display: none;
			}
		}

		@media (max-width: 767px){
			--width: 100% !important;

			&.size-portrait-small{
				max-width: 400px !important;
				min-width: 0 !important;
			}
		}
	}
	
	.listing + a{
		margin: 100px 0 0;
	}
	&.show-all .listing + a,
	.listing:not(:has([data-filter-item]:nth-child(9))) + a{
		display: none;
	}
	&:not(.show-all) [data-filter-item]:nth-child( n+9 of :not([hidden]) ){
		display: none;
	}
}