.trs-exp {
background: var(--trs-offwhite);
overflow: hidden; } .trs-exp__header {
display: flex;
flex-direction: column;
gap: var(--trs-space-lg);
margin-bottom: var(--trs-space-lg);
}
.trs-exp__header-right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.trs-exp__cta   { align-self: flex-start; }
.trs-exp__text.trs-fade-up.is-visible {
margin: 0 0 var(--trs-space-sm);
} .trs-exp__carousel-wrap { margin-left:  calc(-1 * var(--trs-spacing-h));
margin-right: calc(-1 * var(--trs-spacing-h));
padding-left: var(--trs-spacing-h);
overflow: hidden;
cursor: grab;
}
.trs-exp__carousel-wrap:active { cursor: grabbing; }
.trs-exp__carousel {
display: flex;
gap: clamp(40px, 3vw, 75px); overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-right: var(--trs-spacing-h);
padding-bottom: 4px; }
.trs-exp__carousel::-webkit-scrollbar { display: none; } .trs-exp__card {
flex-shrink: 0;
width: clamp(220px, 32vw, 350px);
scroll-snap-align: start;
text-decoration: none;
display: block;
position: relative;
} .trs-exp__card-mask {
position: relative;
width: 100%; aspect-ratio: 350 / 517;
}
.trs-exp__card-svg {
width: 100%;
height: 100%;
display: block;
} .trs-exp__card-img {
transform-origin: center center;
transform-box: fill-box;
transition: transform 600ms var(--trs-ease);
}
.trs-exp__card:hover .trs-exp__card-img {
transform: scale(1.07);
} .trs-exp__card-overlay {
transition: fill-opacity 400ms ease;
}
.trs-exp__card:hover .trs-exp__card-overlay {
fill-opacity: 0.55; } .trs-exp__card-content {
position: absolute;
bottom: clamp(20px, 5%, 40px);
left: 0; right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-sm);
text-align: center;
padding: 0 var(--trs-space-md);
pointer-events: none;
}
.trs-exp__card-title {
font-family: var(--trs-font-nav);
font-size: clamp(14px, 2vw, 20px);
font-weight: 500;
color: var(--trs-offwhite);
text-transform: uppercase;
letter-spacing: var(--trs-ls-wider);
line-height: var(--trs-lh-snug);
}
.trs-exp__card-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--trs-offwhite);
transition: transform var(--trs-dur-fast) var(--trs-ease);
}
.trs-exp__card:hover .trs-exp__card-arrow {
transform: translateX(3px);
}
.trs-exp__card-arrow svg {
width: clamp(18px, 2.5vw, 24px);
height: clamp(18px, 2.5vw, 24px);
} .trs-exp__nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--trs-space-xs);
margin-top: var(--trs-space-sm);
} .trs-exp__nav-arrow {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--trs-red);
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--trs-dur-fast) ease,
transform var(--trs-dur-fast) var(--trs-ease);
}
.trs-exp__nav-arrow:hover,
.trs-exp__nav-arrow:active, 
.trs-exp__nav-arrow:focus {
color: var(--trs-terracotta);
background: none ;
box-shadow: none;
}
.trs-exp__nav-arrow:disabled { opacity: .25; cursor: default; }
.trs-exp__nav-arrow svg {
width: 20px; height: 20px;
} .trs-exp__dots {
display: flex;
gap: 8px;
align-items: center;
}
.trs-exp__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(123, 63, 41, 0.3);
border: none;
cursor: pointer;
padding: 0;
transition: background var(--trs-dur-fast) ease,
transform  var(--trs-dur-fast) ease;
}
.trs-exp__dot.is-active {
background: var(--trs-red);
transform: scale(1.3);
}
.trs-exp__dot:hover:not(.is-active) {
background: rgba(123, 63, 41, 0.6);
} @media (min-width: 768px) {
.trs-exp__header {
flex-direction: row;
align-items: stretch;
gap: 0;
}
.trs-exp__header-left {
flex: 1;
}
.trs-exp__header-right {
flex: 1;
}
}
@media (min-width: 1024px) {
.trs-exp__card {
width: clamp(280px, 28vw, 350px);
}
}