/* RL Experience Grid */
.rl-exp__grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .rl-exp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rl-exp__grid { grid-template-columns: minmax(0, 1fr); } }

.rl-exp__card {
	position: relative; isolation: isolate; overflow: hidden; display: block;
	aspect-ratio: 3 / 4; max-width: 100%;
	background: var(--rl-ink, #0E0D0B); color: var(--rl-on-ink, #F4EFE5);
	transition: transform .5s var(--rl-ease), box-shadow .5s var(--rl-ease);
}
.rl-exp__card img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rl-ease); }
.rl-exp__card:hover img { transform: scale(1.06); }
.rl-exp__card::after, .rl-exp__card::before { content: ""; position: absolute; inset: 0; transition: opacity .5s var(--rl-ease); }
.rl-exp__card::after { z-index: -2; background: linear-gradient(180deg, rgba(14, 13, 11, 0) 35%, rgba(14, 13, 11, .88) 100%); }
.rl-exp__card::before { z-index: -1; opacity: 0; background: linear-gradient(180deg, rgba(14, 13, 11, .2) 0%, rgba(14, 13, 11, .94) 100%); }
.rl-exp__card:hover::before, .rl-exp__card:focus-visible::before { opacity: 1; }

.rl-exp__num { position: absolute; top: 22px; left: 24px; font: 500 11px/1 var(--rl-font-mono, monospace); letter-spacing: .18em; color: var(--rl-gold-lt, #E8CD8A); }
.rl-exp__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.rl-exp__title { font: 500 clamp(24px, 2vw, 28px)/1.1 var(--rl-font-display, Georgia, serif); color: inherit; text-wrap: balance; }
.rl-exp__text {
	font-size: 15px; line-height: 1.55; color: #D9D2C4;
	max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
	transition: max-height .5s var(--rl-ease), opacity .4s, margin .4s;
}
.rl-exp__card:hover .rl-exp__text, .rl-exp__card:focus-visible .rl-exp__text { max-height: 140px; opacity: 1; margin-top: 10px; }
.rl-exp-text-always .rl-exp__text { max-height: none; opacity: 1; margin-top: 10px; }
.rl-exp-text-hide .rl-exp__text { display: none; }
@media (hover: none) { .rl-exp__text { max-height: 140px; opacity: 1; margin-top: 10px; } }

.rl-exp__go {
	display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: 16px;
	border: 1px solid rgba(244, 239, 229, .4); border-radius: 50%; color: inherit;
	transition: background-color .3s, border-color .3s, color .3s;
}
.rl-exp__go svg, .rl-exp__go i { width: 15px; height: 15px; font-size: 15px; }
.rl-exp__card:hover .rl-exp__go { background: var(--rl-gold, #C29B4E); border-color: var(--rl-gold, #C29B4E); color: var(--rl-ink, #0E0D0B); }