.slider-hero {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: clamp(320px, 48vw, 600px);
overflow: hidden;
isolation: isolate;
background: #3f3127;
border-radius: 16px;
}
.slider-hero .tag-slider-items {
position: relative;
width: 100%;
min-height: inherit;
overflow: hidden;
}
.slider-hero .tag-slider-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: inherit;
padding: clamp(32px, 7vw, 96px);
transform: translate3d(100%, 0, 0);
visibility: hidden;
pointer-events: none;
transition: transform 500ms ease, visibility 500ms step-end;
will-change: transform;
}
.slider-hero .tag-slider-slide.is-current {
z-index: 2;
transform: translate3d(0, 0, 0);
visibility: visible;
pointer-events: auto;
transition: transform 500ms ease, visibility 0s step-start;
}
.slider-hero .tag-slider-slide.is-before {
transform: translate3d(-100%, 0, 0);
}
.slider-hero .tag-slider-slide.is-after {
transform: translate3d(100%, 0, 0);
}
.tag-slider-prev,
.tag-slider-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(52px, 7vw, 96px);
margin: 0;
padding: 0;
color: #fff;
background: linear-gradient(90deg, rgba(22, 17, 13, 0.36), transparent);
border: 0;
border-radius: 0;
cursor: pointer;
}
.tag-slider-prev {
left: 0;
}
.tag-slider-next {
right: 0;
background: linear-gradient(270deg, rgba(22, 17, 13, 0.36), transparent);
}
.tag-slider-prev:hover,
.tag-slider-prev:focus-visible,
.tag-slider-next:hover,
.tag-slider-next:focus-visible {
color: #fff;
background-color: rgba(0, 0, 0, 0.16);
outline: 2px solid rgba(255, 255, 255, 0.82);
outline-offset: -4px;
}
.tag-slider-control-icon {
display: block;
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
}
.tag-card-slider-shell,
.tag-medium-card-slider-shell {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.tag-card-slider,
.tag-medium-card-slider {
width: 100%;
min-width: 0;
}
.tag-card-slider-track,
.tag-medium-card-slider-track {
display: flex !important;
align-items: stretch;
justify-content: flex-start;
width: 100%;
min-width: 0;
gap: 24px;
padding: 4px 2px 14px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-padding-inline: 2px;
scroll-snap-type: inline mandatory;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.tag-card-slider-card,
.tag-medium-card-slider-card {
flex: 0 0 86% !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tag-card-slider-controls,
.tag-medium-card-slider-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding-top: 22px;
}
.tag-card-slider-controls[hidden],
.tag-medium-card-slider-controls[hidden] {
display: none !important;
}
.tag-card-slider-prev,
.tag-card-slider-next,
.tag-medium-card-slider-prev,
.tag-medium-card-slider-next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin: 0;
padding: 0;
color: #3f3127;
background: #fff;
border: 1px solid rgba(63, 49, 39, 0.18);
border-radius: 999px;
box-shadow: 0 8px 20px rgba(43, 32, 24, 0.08);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.tag-card-slider-prev:hover,
.tag-card-slider-prev:focus-visible,
.tag-card-slider-next:hover,
.tag-card-slider-next:focus-visible,
.tag-medium-card-slider-prev:hover,
.tag-medium-card-slider-prev:focus-visible,
.tag-medium-card-slider-next:hover,
.tag-medium-card-slider-next:focus-visible {
color: #fff;
background: #7a1f1f;
border-color: #7a1f1f;
transform: translateY(-1px);
outline: none;
}
.tag-card-slider-prev:disabled,
.tag-card-slider-next:disabled,
.tag-medium-card-slider-prev:disabled,
.tag-medium-card-slider-next:disabled {
opacity: 0.35;
cursor: default;
transform: none;
}
@media (min-width: 768px) {
.tag-card-slider-card {
flex-basis: calc((100% - 24px) / 2) !important;
}
.tag-medium-card-slider-card {
flex-basis: calc((100% - 40px) / 2) !important;
}
.tag-medium-card-slider-track {
gap: 40px;
}
}
@media (min-width: 1180px) {
.tag-card-slider-card {
flex-basis: calc((100% - 48px) / 3) !important;
}
}
@media (max-width: 600px) {
.slider-hero {
min-height: 360px;
border-radius: 12px;
}
.slider-hero .tag-slider-slide {
padding: 48px 56px;
}
.tag-card-slider-track,
.tag-medium-card-slider-track {
gap: 16px;
}
.tag-card-slider-card,
.tag-medium-card-slider-card {
flex-basis: 88% !important;
}
}
@media (prefers-reduced-motion: reduce) {
.slider-hero .tag-slider-slide,
.tag-card-slider-track,
.tag-medium-card-slider-track {
scroll-behavior: auto;
transition: none !important;
}
}