/* size up as needed */
/* Max Width 1399px
------------------------------------*/
@media all and (max-width: 1399px) {
    .header .row {
        justify-content: space-between;
    }
    .header .col-lg-4, .header .col-lg-8 {
        width: fit-content;
    }
    .header .header-logo {
        max-width: 300px !important;
        height: auto !important;
    }
    html[lang="nl"] .header .header-logo,
    html[lang="fr"] .header .header-logo,
    html[lang="de"] .header .header-logo,
    html[lang="pt"] .header .header-logo,
    html[lang="sr"] .header .header-logo,
    html[lang="es"] .header .header-logo {
        height: 20px !important;
    }
    html[lang="fr"] .header .navbar .navbar-nav,
    html[lang="de"] .header .navbar .navbar-nav,
    html[lang="es"] .header .navbar .navbar-nav {
        gap: 15px;
    }
    html[lang="nl"] body:not(.resources) .hero,
    html[lang="fr"] body:not(.resources) .hero,
    html[lang="de"] body:not(.resources) .hero,
    html[lang="it"] body:not(.resources) .hero {
        height: auto;
    }
    html[lang="nl"] body:not(.resources) .hero .container,
    html[lang="fr"] body:not(.resources) .hero .container,
    html[lang="de"] body:not(.resources) .hero .container,
    html[lang="it"] body:not(.resources) .hero .container {
        transform: none;
        top: unset;
    }
    html[lang="nl"] .family-list-title,
    html[lang="de"] .family-list-title {
        word-break: break-all;
    }
    html[lang="de"] .family-list-content li {
        word-break: break-all;
    }
}


/* Max Width 1199px
------------------------------------*/
@media all and (max-width: 1199px) {
    .header .col-lg-8 {
        display: flex;
        align-items: center;
    }
    .header .navbar {
        position: unset;
    }
    .header .navbar-toggler {
        background: var(--white);
        font-size: 20px;
        border: none;
        outline: none;
        color: var(--black);
        border-radius: 0;
    }
    .header .navbar-toggler:focus-visible,
    .header .navbar-toggler:focus,
    .header .navbar-toggler:target {
        outline: none;
        border: 0;
        box-shadow: none;
    }
    .header .navbar .navbar-collapse {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        width: 100%;
        background: var(--white);
        box-shadow: 0px .4rem 1rem .4rem rgba(0, 0, 0, 0.1);
    }
    .header .navbar .navbar-nav {
        margin-left: auto;
        margin-right: auto;
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        max-width: 960px;
        justify-content: space-between;
    }
    body:not(.resources) .hero {
        height: auto;
    }
    body:not(.resources) .hero .container {
        transform: none;
        top: unset;
    }
    html[lang="da"] .family-list-title, 
    html[lang="sv"] .family-list-title {
        word-break: break-all;
    }
}


/* Max Width 991px
------------------------------------*/
@media all and (max-width: 991px) {
    #super-header .row {
        justify-content: space-between;
    }
    #super-header .row > div {
        width: fit-content
    }
    .header .navbar .navbar-nav {
        max-width: 720px;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        gap: 0;
    }
    .header .nav-item:not(:last-of-type) {
        border-bottom: 1px solid var(--slate);
    }
    body.resources .hero {
        height: auto;
    }
    .hero .container {
        flex-direction: column;
        transform: none;
        gap: 50px;
    }
    body.resources .hero .container {
        transform: none;
        top: unset;
    }
    body.resources .hero .hero-content-image {
        display: none;
    }
    .hero .hero-content-message {
        max-width: 100%;
    }
    .carousel-inner::part(scroll-container) {
        --slides-per-page: 2;
        --slide-size: calc((100% - (2 - 1) * var(--slide-gap)) / 2);
    }
    .scoreboard-grid-wrapper {
        gap: 30px;
    }
    .scoreboard-grid-hero .scoreboard-tile {
        padding: 50px 20px;
        position: relative;
        top: unset;
        transform: none;
    }
    .history-list {
        flex-wrap: wrap;
        row-gap: 30px;
    }
    .history-list-tile {
        width: calc(50% - 15px);
    }
    .video-embed {
        height: auto;
    }
    .video-embed img {
        width: 100%;
        height: auto;
    }
    .color-boxes {
        row-gap: 30px;
    }
    .scoreboard-grid {
        margin-top: 20px;
    }
    html[lang="nl"] .people-performance .people-performance-tile strong {
        word-break: break-all;
    }
    html[lang="zh-CN"] .family-list-revenue strong,
    html[lang="da"] .family-list-revenue strong,
    html[lang="nl"] .family-list-revenue strong,
    html[lang="fr"] .family-list-revenue strong,
    html[lang="de"] .family-list-revenue strong,
    html[lang="hu"] .family-list-revenue strong,
    html[lang="it"] .family-list-revenue strong,
    html[lang="ja"] .family-list-revenue strong,
    html[lang="pt"] .family-list-revenue strong,
    html[lang="sr"] .family-list-revenue strong  {
        font-size: 2rem;
    }
    html[lang="da"] .family-list-content li,
    html[lang="nl"] .family-list-content li {
        word-break: break-all;
    }
    html[lang="fr"] .family-list-title,
    html[lang="hu"] .family-list-title,
    html[lang="it"] .family-list-title,
    html[lang="sr"] .family-list-title,
    html[lang="es"] .family-list-title {
        word-break: break-all;
    }
}


/* Max Width 767px
------------------------------------*/
@media all and (max-width: 767px) {
    .header .navbar .navbar-nav {
        max-width: 540px;
    }
    .carousel-inner::part(scroll-container) {
        --slides-per-page: 1;
        --slide-size: calc((100% - (1 - 1) * var(--slide-gap)) / 1);
    }
    .game-changers-wrapper {
        flex-direction: column;
    }
    .game-changers-post {
        width: 100%;
    }
    .scoreboard-grid, .scoreboard-grid-wrapper {
        gap: 20px;
    }
    .scoreboard-grid .scoreboard-tile {
        width: calc(50% - 10px);
    }
    .family-list {
        flex-direction: column;
    }
    .family-list-tile {
        width: 100%;
    }
    .main .sky-background.container {
        padding: 60px;
    }
    .people-performance .people-performance-tile strong {
        flex-direction: column;
    }
    html[lang="da"] .color-boxes > div > div > div,
    html[lang="nl"] .color-boxes > div > div > div,
    html[lang="de"] .color-boxes > div > div > div {
        word-break: break-all;
    }
    html[lang="zh-CN"] .family-list-revenue strong,
    html[lang="da"] .family-list-revenue strong,
    html[lang="nl"] .family-list-revenue strong,
    html[lang="fr"] .family-list-revenue strong,
    html[lang="de"] .family-list-revenue strong,
    html[lang="hu"] .family-list-revenue strong,
    html[lang="it"] .family-list-revenue strong,
    html[lang="ja"] .family-list-revenue strong,
    html[lang="pt"] .family-list-revenue strong,
    html[lang="sr"] .family-list-revenue strong {
        font-size: 3.2rem;
    }
}


/* Max Width 575px
------------------------------------*/
@media all and (max-width: 575px) {
    .header .header-logo {
        max-width: 250px !important;
        height: auto !important;
    }
    .hero .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .scoreboard-grid, .scoreboard-grid-wrapper {
        flex-direction: column;
    }
    .scoreboard-grid .scoreboard-tile {
        width: 100%;
    }
    .scoreboard-grid-hero .scoreboard-tile .scoreboard-title {
        font-size: 3.6rem;
    }
    .people-performance {
        flex-direction: column;
    }
    .people-performance .people-performance-tile {
        width: 100%;
    }
    .history-list-tile {
        width: 100%;
    }
    .video-embed {
        height: 300px;
    }
    .video-embed img {
        height: 100%;
    }
    .main .sky-background.container {
        padding: 40px;
    }
    .strategic-plan h2 {
        word-break: break-all;
    }
}