#pinnwand{
	padding-bottom: var(--vfl-padding-v);
}
.pin{
	border-radius: var(--vfl-border-radius);
	overflow: hidden;
	position: relative;
	
}

.pin.w-25{
	aspect-ratio: 0.75;
	width: calc(100% / 4 - 9px);
}
@supports not (aspect-ratio: 0.75) {
	.pin.w-25::before {
		float: left;
		padding-top: 75%;
		content: "";
	}

	.pin.w-25::after {
		display: block;
		content: "";
		clear: both;
	}
}
.pin.w-50{
	aspect-ratio: 1.4;
	width: calc(100% / 2 - 6px);
}
@supports not (aspect-ratio: 1.4) {
	.pin.w-50::before {
		float: left;
		padding-top: 140%;
		content: "";
	}

	.pin.w-50::after {
		display: block;
		content: "";
		clear: both;
	}
}
.pin.w-100{
	aspect-ratio: 2.8;
	width: 100%;
}
@supports not (aspect-ratio: 2.8) {
	.pin.w-100::before {
		float: left;
		padding-top: 280%;
		content: "";
	}

	.pin.w-100::after {
		display: block;
		content: "";
		clear: both;
	}
}

.pin img{
	height: 100%;
	object-fit: cover;
	transition: scale .24s ease-in-out;
	width: 100%;
}
.pin-text{
	background-color: rgba(0,0,0,.8);
	border-radius: var(--vfl-border-radius);
	bottom: 0;
	color: var(--vfl-color-secondary);
	font-size: var(--vfl-font-size-small);
	font-weight: 600;
	height: fit-content;
	left: 0;
	line-height: 150%;
	min-height: 20%;
	padding: 12px;
	position: absolute;
	text-align: center;
	transform: translateY(101%);
	transition: transform .24s ease-in-out;
	width: 100%;
}
.pin:hover .pin-text{
	transform: translateY(0);
}
.pin:hover img{
	scale: 1.05;
}
@media screen and (max-width: 1024px) {
	.pin.w-25{
		width: calc(100% / 4 - 9px);
	}
	.pin.w-50{
		width: calc(100% / 2 - 9px);
	}
	.pin.w-100{
		width: 100%;
	}
}
@media screen and (max-width: 960px) {
	.pin.w-25{
		width: calc(100% / 2 - 6px);
	}
	.pin.w-50,
	.pin.w-100{
		width: 100%;
	}
}
@media screen and (max-width: 460px) {
	.pin.w-25,
	.pin.w-50,
	.pin.w-100{
/* 		width: 100%; */
	}
}