.reservation-hero {
    --hero-parallax-y: 0px;
    --hero-crop: clamp(0.75rem, 2.5vh, 1.5rem);
    position: relative;
    height: clamp(13rem, 30vh, 20rem);
    min-height: 0 !important;
    overflow: hidden;
    background-image: none !important;
    background-attachment: scroll !important;
    isolation: isolate;
}

.hero-wrap.reservation-hero,
.hero-wrap-c.reservation-hero {
    background-attachment: scroll !important;
    height: clamp(13rem, 30vh, 20rem) !important;
    min-height: 0 !important;
}

.reservation-hero .slider-text {
    height: 100% !important;
    min-height: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
    .hero-wrap.reservation-hero,
    .hero-wrap-c.reservation-hero {
        background-attachment: fixed !important;
    }
}

.reservation-hero-bg {
    position: absolute;
    top: calc(-1 * var(--hero-crop));
    left: 0;
    z-index: 0;
    width: 100%;
    height: calc(100% + (var(--hero-crop) * 2));
    object-fit: cover;
    object-position: center center;
    transform: translate3d(0, var(--hero-parallax-y), 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    user-select: none;
    will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
    .reservation-hero-bg {
        will-change: transform;
    }
}

.reservation-hero .overlay {
    z-index: 1;
}

.reservation-hero .container {
    height: 100%;
    position: relative;
    z-index: 2;
}

.reservation-hero .overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, .12) 0%,
        rgba(0, 0, 0, .2) 48%,
        rgba(0, 0, 0, .62) 100%
    );
}

.reservation-hero .slider-text {
    align-items: flex-end !important;
    inset: 0 !important;
    padding-bottom: clamp(.5rem, 2vh, .85rem);
}

.reservation-hero .slider-text > [class*="col-"] {
    padding-bottom: 0 !important;
}

.reservation-hero .bread {
    line-height: 1.08;
    margin-bottom: 0 !important;
    padding-inline: .75rem;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .42);
}

.reservation-hero--static .reservation-hero-bg {
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .reservation-hero-bg {
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }
}