/* Hero picture (main-block-img / main-block-img-2, front page and product templates).
 * It used to sit at negative offsets (top -140px, right -300..-710px), so it slid under the
 * header and past the right edge of the screen. Now it fills the right half of the container
 * as a 16:9 box (all hero pictures are ~16:9), and the text keeps to the left half. */
@media (min-width: 992px) {
    .main-block .container {
        --okt-hero-w: 100vw; /* fluid container below 1200px */
    }
    .main-block .container > .main-block-img,
    .main-block .container > .main-block-img-2 {
        top: 0;
        right: 15px;
        left: auto;
        width: calc(50% - 30px);
        height: auto;
        aspect-ratio: 16 / 9;
        background-position: center top;
        background-size: contain;
    }
    .main-block .container:has(> .main-block-img, > .main-block-img-2) > .main-block-text {
        max-width: calc(50% - 15px);
    }
    /* Play button: the centre of the picture box (container width / 4 from the right edge). */
    .main-block .container > .main-block-video-btn-flat {
        right: calc(15px + (var(--okt-hero-w) / 2 - 30px) / 2 - 60px);
        top: calc((var(--okt-hero-w) / 2 - 30px) * 9 / 32 - 45px);
    }
}
@media (min-width: 1200px) {
    .main-block .container { --okt-hero-w: 1140px; }
}
@media (min-width: 1400px) {
    .main-block .container { --okt-hero-w: 1340px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* The play button is 100px wide here (style.css). */
    .main-block .container > .main-block-video-btn-flat {
        right: calc(15px + (var(--okt-hero-w) / 2 - 30px) / 2 - 50px);
    }
}