.rel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line, rgba(255, 255, 255, .13));
}
.rl { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: block; background: var(--wp--preset--color--coal); }
.rl img { width: 100%; height: 100%; object-fit: cover; opacity: .8; filter: grayscale(.2); transition: transform 1s var(--e), opacity .6s, filter .6s; }
.rl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .05) 55%); }
.rl-t { position: absolute; z-index: 2; bottom: 0; padding: 30px 28px; }
.rl-t .k { font-family: var(--wp--preset--font-family--display); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--wp--preset--color--ice); margin-bottom: 8px; }
.rl-t h3 { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.7rem; color: var(--wp--preset--color--white); }

@media (hover: hover) and (pointer: fine) {
	.rl:hover img { transform: scale(1.06); opacity: 1; filter: grayscale(0); }
}

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