/* Aspect ratios
======================================== */
.ratio-square,
.ratio-vertical,
.ratio-horizontal{
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
}
.ratio-square{
	padding-bottom: var(--ratio-square);
}
.ratio-vertical{
	padding-bottom: var(--ratio-vertical);
}
.ratio-horizontal{
	padding-bottom: var(--ratio-horizontal);
}
.ratio-square .thumb,
.ratio-vertical .thumb,
.ratio-horizontal .thumb{
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	object-fit: cover;
}

/* Vars
======================================== */
:root{
	--ratio-square: 100%; /* 1/1 aspect ratio */
	--ratio-vertical: calc(5/4*100%); /* 4/5 aspect ratio */
	--ratio-horizontal: calc(3/4*100%); /* 4/3 aspect ratio */
}