main > * {
	margin-top: var(--bs-gutter-x);
}

main {
	margin-bottom: var(--bs-gutter-x);
}

.card-h > img {
	align-self: center;
	max-width: 100%;
	margin-top: var(--std-gap);
	border-radius: var(--bs-border-radius);
}

.card-h {
	overflow: hidden;
}

.slider {
	overflow: hidden;
	border-radius: var(--bs-border-radius);
	position: relative;
	height: 15rem;
	margin-top: 0px;
}

.slider img {
	height: 15rem;
	width: auto;
}

.slider .overlay {
	background: linear-gradient(to bottom, transparent, #000b);
	backdrop-filter: blur(0px);
	transition: backdrop-filter .5s;
}

.slider .overlay a {
	position: absolute;
	bottom: -2em;
	left: 0px;
	right: 0px;
	text-align: center;
	padding: 1rem;
	text-decoration: none;
	color: #fff;
	font-size: 2em;
	display: block;
	transition: transform .5s;
}

.slider .overlay a::after {
	content: "\F282";
	font-family: bootstrap-icons;
}

.slider .overlay:hover {
	backdrop-filter: blur(10px);
}

.slider .overlay:hover a {
	transform: translateY(-2em);
}

@media (min-width: 768px) {
	.card-h {
		flex-direction: row;
	}
	
	.card-h > img {
		margin-left: var(--std-gap);
	}
	
	.slider, .slider img {
		height: 25rem;
	}
}