/* Keep the homepage banner within its column, including codec <picture> wrappers. */
@media (max-width: 767px) {
    .index_page #content #slides-wraper,
    .index_page #content #slides {
        box-sizing: border-box;
        width: 100%;
        max-width: 437px;
        height: auto;
        float: none;
        margin: 0;
        background: none;
    }

    .index_page #content #slides .slides_container,
    .index_page #content #slides .slides_control {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0;
    }

    .index_page #content #slides .slides_control > div {
        display: grid;
        grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
        width: 100%;
        height: auto;
        min-width: 0;
        position: relative;
    }

    .index_page #content #slides .slides_control > div > picture,
    .index_page #content #slides .slides_control > div > img {
        grid-column: 1 / -1;
        grid-row: 1 / 4;
        align-self: start;
        min-width: 0;
        width: 100%;
        display: block;
    }

    .index_page #content #slides img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        transform: none;
        will-change: auto;
    }

    /* The original slide text has desktop absolute positions in the CMS. */
    .index_page #content #slides .slides_control > div > div,
    .index_page #content #slides .slides_control > div > .readmore {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        z-index: 1;
        letter-spacing: 0;
    }

    .index_page #content #slides .slides_control > div > div:nth-child(2) {
        grid-area: 1 / 2;
        align-self: end;
        margin: 12px 10px 0 0;
        font-size: 21px !important;
        line-height: 1.15;
    }

    .index_page #content #slides .slides_control > div > div:nth-child(3) {
        grid-area: 2 / 2;
        align-self: start;
        margin: 0 10px 0 0;
        font-size: 23px !important;
        line-height: 1.15;
    }

    .index_page #content #slides .slides_control > div > div:nth-child(4) {
        grid-area: 3 / 2;
        align-self: start;
        margin: 12px 10px 0 0;
        font-size: 14px !important;
        line-height: 1.4;
    }

    .index_page #content #slides .slides_control > div > div:nth-child(5) {
        grid-area: 4 / 1 / 5 / -1;
        margin: 12px 10px 8px;
        font-size: 14px !important;
        line-height: 1.4;
    }

    .index_page #content #slides .slides_control > div > .readmore {
        grid-area: 5 / 1 / 6 / -1;
        justify-self: end;
        width: 103px !important;
        height: 30px;
        margin: 0 12px 14px 0;
    }
}