.tb-hero {
    --hero-accent: #f23f19;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
}

/* Backend-controlled transparent header overlap. */
.tb-hero--header-overlay {
    margin-top: var(--tb-hero-header-overlap-desktop, 0px);
    z-index: 0;
}

.tb-hero__viewport {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #f7eadb;
    touch-action: pan-y;
}

.tb-hero__track {
    display: flex;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.tb-hero__slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 2048 / 768;
}

.tb-hero__link,
.tb-hero__picture,
.tb-hero__image {
    display: block;
    width: 100%;
    height: 100%;
}

.tb-hero__image {
    max-width: 100%;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

/* Thin pagination progress line attached directly to the banner. */
.tb-hero__pagination {
    display: flex;
    width: 100%;
    height: 4px;
    min-height: 4px;
    margin: 0;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    background: #e8ded7;
    line-height: 0;
}

.tb-hero__dot {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 0;
    width: auto;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background-color 220ms ease;
}

.tb-hero__dot:hover {
    background: rgba(242, 63, 25, 0.28);
}

.tb-hero__dot[aria-current="true"] {
    width: auto;
    background: var(--hero-accent);
}

.tb-hero__dot:focus-visible,
.tb-hero__viewport:focus-visible {
    outline: 3px solid var(--hero-accent);
    outline-offset: 3px;
}

@media (max-width: 767px) {

    .tb-hero--header-overlay {
        margin-top: var(--tb-hero-header-overlap-mobile, 0px);
    }

    .tb-hero__slide {
        aspect-ratio: 4 / 3;
    }

    .tb-hero__pagination,
    .tb-hero__dot {
        height: 3px;
        min-height: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb-hero__track,
    .tb-hero__dot {
        transition: none;
    }
}