/* Keep the header in flow before JavaScript measures --header-height. */
body.betraining-home .main-wrapper {
    margin-top: 0;
    overflow: clip;
}

body.betraining-home .header,
body.betraining-home .header.fixed {
    position: sticky;
    transition-property: background-color, box-shadow;
}

/* Reserve the logo slot before the original upload has decoded. */
.betraining-home .header .logo img:not(.pe-3),
.betraining-home .header .logo-small img,
.betraining-home .header .menu-logo img {
    width: 122px;
    height: 50px;
    object-fit: contain;
}

@media (min-width: 1200px) {
    .betraining-home .header > .container {
        max-width: 1320px;
    }

    .betraining-home .header .header-nav {
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 64px;
    }

    .betraining-home .header .main-menu-wrapper .main-nav > li + li {
        margin-inline-start: 6px;
    }

    .betraining-home .header .navbar-header,
    .betraining-home .header .main-menu-wrapper,
    .betraining-home .header .header-navbar-rht {
        flex-shrink: 0;
    }

    .betraining-home .header .header-navbar-rht {
        flex-wrap: nowrap;
    }

    .betraining-home .header .navbar-brand.logo {
        margin-inline-end: 0;
    }
}

@media (min-width: 992px) {
    .betraining-home .header .main-nav > li > a {
        white-space: nowrap;
    }
}

/* Give the narrower desktop header explicit rows from the first paint. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .betraining-home .header .header-nav {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 12px;
    }

    .betraining-home .header .navbar-header {
        grid-area: 1 / 1;
    }

    .betraining-home .header .header-navbar-rht {
        grid-area: 1 / 2;
        justify-self: end;
    }

    .betraining-home .header .main-menu-wrapper {
        grid-area: 2 / 1 / 3 / -1;
        justify-self: center;
    }
}

@media (max-width: 991.98px) {
    .betraining-home .header .logo img:not(.pe-3),
    .betraining-home .header .logo-small img {
        width: 110px;
        height: 45px;
    }
}

/* A stable frame prevents the hero from pushing later sections on decode. */
.betraining-home .hero-section .banner-img-right {
    width: 100%;
    aspect-ratio: 101 / 100;
}

.betraining-home .hero-section .banner-img-right > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Match Owl's responsive item counts while it has not initialized yet. */
.betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) > :nth-child(n + 6) {
    display: none;
}

@media (max-width: 999.98px) {
    .betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) > :nth-child(n + 4) {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) > :nth-child(n + 3) {
        display: none;
    }
}

@media (max-width: 419.98px) {
    .betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) {
        grid-template-columns: minmax(0, 1fr);
    }

    .betraining-home .gigs-card-cat:not(.owl-loaded):not(.owl-loading) > :nth-child(n + 2) {
        display: none;
    }
}