/**
 * Intro hero block.
 *
 * Values mirror the Tilda original (bebestschool.kz/offers, rec541890740):
 * a 62 px bold #f66746 heading and 20 px text in a 563 px column on the left,
 * the picture — 481 × 428 — 634 px into the 1160 px grid, 15 px from the top,
 * the band 480 px high. On tablets it is all centred, the picture under the
 * text; on phones the heading is 40 px.
 */

.bbs-ihero {
    padding: 15px 0 37px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-font, 'ApercuPro', Arial, sans-serif);
}

.bbs-ihero__inner {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bbs-ihero__content {
    flex: 0 1 563px;
    min-width: 0;
}

.bbs-ihero__title {
    margin: 0;
    color: #f66746;
    font-size: 62px;
    line-height: 74px;
    font-weight: 700;
    overflow-wrap: break-word;
}

.bbs-ihero__text {
    max-width: 560px;
    margin: 21px 0 0;
    font-size: 20px;
    line-height: 31px;
    font-weight: 400;
}

.bbs-ihero__media {
    flex: 0 0 481px;
    margin: 0 45px 0 auto;
}

.bbs-ihero__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 1199 and below: the 960 px grid ── */
@media (max-width: 1199px) {
    .bbs-ihero {
        padding: 40px 0;
    }

    .bbs-ihero__title {
        font-size: 60px;
        line-height: 72px;
    }

    .bbs-ihero__text {
        max-width: 422px;
        margin-top: 13px;
    }

    .bbs-ihero__media {
        flex-basis: 440px;
        margin-right: 0;
    }
}

/* ── 959 and below: centred, the picture under the text ── */
@media (max-width: 959px) {
    .bbs-ihero {
        padding: 60px 0 50px;
    }

    .bbs-ihero__inner {
        flex-direction: column;
        max-width: 680px;
        text-align: center;
    }

    .bbs-ihero__content {
        flex: none;
        width: 100%;
    }

    .bbs-ihero__title {
        font-size: 52px;
        line-height: 62px;
    }

    .bbs-ihero__text {
        margin: 8px auto 0;
    }

    .bbs-ihero__media {
        flex: none;
        width: 500px;
        max-width: 100%;
        margin: 25px 0 0;
    }
}

@media (max-width: 639px) {
    .bbs-ihero__title {
        max-width: 320px;
        margin: 0 auto;
        font-size: 40px;
        line-height: 48px;
    }

    .bbs-ihero__text {
        max-width: 300px;
        margin-top: 24px;
    }

    .bbs-ihero__media {
        width: 340px;
    }
}

/* ── Button ── */
.bbs-ihero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 211px;
    min-height: 50px;
    margin-top: 16px;
    padding: 8px 24px;
    border-radius: 20px;
    background: #1cb65a;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.bbs-ihero__btn:hover,
.bbs-ihero__btn:focus-visible {
    background: #169c4c;
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .bbs-ihero__btn {
        transition: none;
    }
}

/* ── Course look ──
   bebestschool.kz/kursy-matematiki, rec817502574: a 62 px purple heading
   605 px wide 56 px from the top, a 26 px medium lead 35 px under it, a
   green 211 × 50 button rounded 20 px, and the picture — 532 × 423 — from
   700 px across, 71 px down; the band 540 px high. On tablets it is centred
   with the picture under the button; on phones the button comes last. */
.bbs-ihero--course {
    padding: 56px 0 42px;
}

.bbs-ihero--course .bbs-ihero__inner {
    align-items: flex-start;
}

.bbs-ihero--course .bbs-ihero__content {
    flex-basis: 605px;
}

.bbs-ihero--course .bbs-ihero__title {
    color: #4b23db;
}

.bbs-ihero--course .bbs-ihero__text {
    max-width: 450px;
    margin-top: 35px;
    font-size: 26px;
    line-height: 33px;
    font-weight: 500;
}

.bbs-ihero--course .bbs-ihero__media {
    flex-basis: 532px;
    margin: 15px 68px 0 auto;
}

@media (max-width: 1199px) {
    .bbs-ihero--course {
        padding: 46px 0 40px;
    }

    .bbs-ihero--course .bbs-ihero__text {
        margin-top: 9px;
    }

    .bbs-ihero--course .bbs-ihero__btn {
        margin-top: 33px;
    }

    .bbs-ihero--course .bbs-ihero__media {
        flex-basis: 490px;
        margin: 0 0 0 auto;
    }
}

@media (max-width: 959px) {
    .bbs-ihero--course {
        padding: 60px 0 80px;
    }

    .bbs-ihero--course .bbs-ihero__inner {
        align-items: center;
    }

    /* The heading, the lead and the button line up with the picture, so the
       button can move under it on phones. */
    .bbs-ihero--course .bbs-ihero__content {
        display: contents;
    }

    .bbs-ihero--course .bbs-ihero__text {
        margin: 29px auto 0;
    }

    .bbs-ihero--course .bbs-ihero__btn {
        margin-top: 35px;
    }

    .bbs-ihero--course .bbs-ihero__media {
        width: 507px;
        margin: 15px 0 0;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--course {
        padding: 60px 0 41px;
    }

    .bbs-ihero--course .bbs-ihero__title {
        max-width: 320px;
        font-size: 34px;
        line-height: 41px;
    }

    .bbs-ihero--course .bbs-ihero__text {
        max-width: 287px;
        margin-top: 26px;
        font-size: 19px;
        line-height: 24px;
    }

    .bbs-ihero--course .bbs-ihero__media {
        order: 1;
        width: 303px;
        margin-top: 26px;
    }

    .bbs-ihero--course .bbs-ihero__btn {
        order: 2;
        min-width: 214px;
        margin-top: 54px;
    }
}

/* ── Banner look ──
   bebestschool.kz/german, rec564206360: the picture covers a band 540 px
   high (497 px from 1199 down, 963 px on tablets, anchored bottom right);
   a 62 px bold white heading 607 px wide 75 px from the top, and 33 px under
   it a white 250 × 45 button with black 16 px bold text, rounded 20 px.
   From 479 px down the band is plain #1cb65a. */
.bbs-ihero--banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 540px;
    padding: 75px 0 40px;
    background: #1cb65a;
    color: #ffffff;
}

.bbs-ihero__bg {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bbs-ihero--banner .bbs-ihero__inner {
    align-items: flex-start;
}

.bbs-ihero--banner .bbs-ihero__content {
    flex-basis: 607px;
}

.bbs-ihero--banner .bbs-ihero__title {
    color: #ffffff;
}

.bbs-ihero--banner .bbs-ihero__btn {
    min-width: 250px;
    min-height: 45px;
    margin-top: 33px;
    background: #ffffff;
    color: #000000;
}

.bbs-ihero--banner .bbs-ihero__btn:hover,
.bbs-ihero--banner .bbs-ihero__btn:focus-visible {
    background: #f1f1f1;
    color: #000000;
}

@media (max-width: 1199px) {
    .bbs-ihero--banner {
        min-height: 497px;
        padding: 60px 0 40px;
    }

    .bbs-ihero--banner .bbs-ihero__content {
        flex-basis: 480px;
    }
}

@media (max-width: 959px) {
    .bbs-ihero--banner {
        min-height: 963px;
        padding: 25px 0 40px;
    }

    .bbs-ihero--banner .bbs-ihero__bg {
        object-position: right bottom;
    }

    /* Stacked, a basis would set the text's height, not its width. */
    .bbs-ihero--banner .bbs-ihero__content {
        flex-basis: auto;
    }

    .bbs-ihero--banner .bbs-ihero__title {
        max-width: 560px;
        margin: 0 auto;
    }

    .bbs-ihero--banner .bbs-ihero__btn {
        margin-top: 23px;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--banner {
        min-height: 776px;
    }

    .bbs-ihero--banner .bbs-ihero__title {
        max-width: 420px;
        font-size: 44px;
        line-height: 53px;
    }
}

@media (max-width: 479px) {
    .bbs-ihero--banner {
        min-height: 0;
        padding: 60px 0 82px;
    }

    .bbs-ihero--banner .bbs-ihero__bg {
        display: none;
    }

    .bbs-ihero--banner .bbs-ihero__title {
        max-width: 310px;
        font-size: 38px;
        line-height: 46px;
    }

    .bbs-ihero--banner .bbs-ihero__btn {
        margin-top: 22px;
    }
}

/* ── Language look ──
   bebestschool.kz/spanish-course, rec548657519: laid out as the course look
   (the class is on too), with a 62 px coral heading 110 px from the top, a
   green button 32 px under it, and a 619 × 440 picture 500 px into the
   grid, 61 px from the top. */
.bbs-ihero--language {
    padding: 61px 0 39px;
}

.bbs-ihero--language .bbs-ihero__content {
    flex-basis: 653px;
    margin-top: 49px;
}

.bbs-ihero--language .bbs-ihero__title {
    color: #f66746;
}

.bbs-ihero--language .bbs-ihero__btn {
    min-width: 250px;
    min-height: 45px;
    margin-top: 32px;
}

.bbs-ihero--language {
    --bbs-ihero-media: 619px;
}

/* A narrower picture moves in from the edge, as the original's do: 41 px
   from it at 619 px wide, 108 px at 463; from 620 px it runs to the grid's
   edge (the last term cancels the rest there). */
.bbs-ihero--language .bbs-ihero__media {
    flex-basis: var(--bbs-ihero-media);
    margin: 0 max(0px, calc(41px + (619px - var(--bbs-ihero-media)) * 0.43 - max(0px, var(--bbs-ihero-media) - 619px) * 41)) 0 auto;
}

@media (max-width: 1199px) {
    .bbs-ihero--language .bbs-ihero__content {
        margin-top: 30px;
    }

    .bbs-ihero--language .bbs-ihero__media {
        flex-basis: calc(var(--bbs-ihero-media) * 0.78);
        margin: 0 0 0 auto;
    }
}

@media (max-width: 959px) {
    .bbs-ihero--language {
        padding: 60px 0 60px;
    }

    .bbs-ihero--language .bbs-ihero__btn {
        margin-top: 21px;
    }

    /* In the column the flex basis would set the height; the width sets the size. */
    .bbs-ihero--language .bbs-ihero__media {
        flex: none;
        width: calc(var(--bbs-ihero-media) * 0.9);
        margin: 40px 0 0;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--language {
        padding-bottom: 41px;
    }

    .bbs-ihero--language .bbs-ihero__title {
        font-size: 36px;
        line-height: 43px;
    }

    /* The button under the heading and the picture last, as on the English,
       Italian, French and Polish pages. */
    .bbs-ihero--language .bbs-ihero__btn {
        order: 0;
        margin-top: 24px;
    }

    .bbs-ihero--language .bbs-ihero__media {
        order: 1;
        width: calc(var(--bbs-ihero-media) * 0.5);
        margin-top: 40px;
    }

    /* "bbs-ihero--button-last" (the block's Additional CSS class): the button
       under the picture, as on bebestschool.kz/spanish-course. */
    .bbs-ihero--button-last .bbs-ihero__media {
        margin-top: 43px;
    }

    .bbs-ihero--button-last .bbs-ihero__btn {
        order: 2;
        margin-top: 46px;
    }
}

/* ── Language look, the picture on the bottom edge ──
   bebestschool.kz/kurs-portugalskogo-yazyka, rec761294958: the heading 90 px
   from the top, the picture standing on the band's bottom and rising 48 px
   above its top; narrower, under the button, still on the bottom edge. */
.bbs-ihero--flush {
    position: relative;
    z-index: 1;
    padding-top: 0;
    padding-bottom: 0;
}

.bbs-ihero--flush .bbs-ihero__content {
    margin-top: 90px;
}

.bbs-ihero--flush .bbs-ihero__media {
    align-self: flex-end;
    margin-top: -48px;
}

.bbs-ihero--flush .bbs-ihero__img {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .bbs-ihero--flush .bbs-ihero__content {
        margin-top: 60px;
    }
}

@media (max-width: 959px) {
    .bbs-ihero--flush {
        padding-top: 60px;
    }

    .bbs-ihero--flush .bbs-ihero__content {
        margin-top: 0;
    }

    .bbs-ihero--flush .bbs-ihero__media {
        align-self: center;
        margin-top: 0;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--flush .bbs-ihero__btn {
        order: 0;
        margin-top: 36px;
    }

    .bbs-ihero--flush .bbs-ihero__media {
        order: 1;
        margin-top: 14px;
    }
}

/* ── Green band ──
   bebestschool.kz/online-english-courses, rec570838510: the language layout
   on #1cb65a — a white 62 px heading 75 px from the top, a white 250 × 45
   button with black text 33 px under it, the picture (557 px) on the right;
   on phones the button stays above the picture. */
.bbs-ihero--green {
    background: #1cb65a;
    color: #ffffff;
}

.bbs-ihero--green .bbs-ihero__content {
    margin-top: 14px;
}

.bbs-ihero--green .bbs-ihero__title {
    color: #ffffff;
}

.bbs-ihero--green .bbs-ihero__btn {
    background: #ffffff;
    color: #000000;
}

.bbs-ihero--green .bbs-ihero__btn:hover,
.bbs-ihero--green .bbs-ihero__btn:focus-visible {
    background: #f1f1f1;
    color: #000000;
}

@media (max-width: 639px) {
    .bbs-ihero--green .bbs-ihero__title {
        font-size: 38px;
        line-height: 46px;
    }

    .bbs-ihero--green .bbs-ihero__btn {
        order: 0;
        margin-top: 22px;
    }

    .bbs-ihero--green .bbs-ihero__media {
        order: 1;
        width: calc(var(--bbs-ihero-media) * 0.63);
        margin-top: 0;
    }
}

/* On a wide screen the heading keeps its 607 px and the picture runs past
   the grid's right edge, as the original's does. */
@media (min-width: 1200px) {
    .bbs-ihero--green {
        padding-bottom: 20px;
    }

    .bbs-ihero--green .bbs-ihero__content {
        flex: 0 0 607px;
    }

    .bbs-ihero--green .bbs-ihero__media {
        margin: -30px -27px 0 auto;
    }
}

/* Language look on a wide screen: the heading may run 605 px, over the
   picture's transparent edge, as the originals' headings do. */
@media (min-width: 1200px) {
    /* The originals' first screen is a 540 px band however short the picture. */
    .bbs-ihero--language {
        box-sizing: border-box;
        min-height: 540px;
    }

    .bbs-ihero--language .bbs-ihero__content {
        position: relative;
        z-index: 1;
    }

    .bbs-ihero--language .bbs-ihero__title {
        width: 605px;
        max-width: none;
    }
}

/* Line breaks typed in the heading hold on a computer only. */
@media (max-width: 1199px) {
    .bbs-ihero__br {
        display: none;
    }
}

/* "bbs-ihero--bleed" (the block's Additional CSS class): on a computer the
   picture runs 50 px past the grid's right edge, as on
   bebestschool.kz/razgovornyj-anglijskij, leaving the heading its room. */
@media (min-width: 1200px) {
    .bbs-ihero--bleed .bbs-ihero__media {
        margin-right: -50px;
    }
}

/* "bbs-ihero--compact" (the block's Additional CSS class): a 52 px heading
   on a computer for a longer title, as on bebestschool.kz/ent-english-for-children. */
@media (min-width: 1200px) {
    .bbs-ihero--compact .bbs-ihero__title {
        font-size: 52px;
        line-height: 57px;
    }
}

/* "bbs-ihero--overlap" (the block's Additional CSS class): on a computer the
   band is 510 px high and the 528 px picture runs 10 px above it and 8 px
   below, 720 px in; the heading 95 px from the top, as on
   bebestschool.kz/meditsinskiy-angliyskiy (rec568034006). */
@media (min-width: 1200px) {
    .bbs-ihero--overlap {
        position: relative;
        min-height: 0;
        padding: 0;
    }

    .bbs-ihero--overlap .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--overlap .bbs-ihero__content {
        margin-top: 0;
        padding-top: 95px;
    }

    .bbs-ihero--overlap .bbs-ihero__media {
        position: relative;
        z-index: 1;
        margin: -10px 52px -8px auto;
    }
}

/* With "bbs-ihero--overlap-low" too: a picture that fits the band — 38 px
   from its top, 721 px in — a two-line heading 135 px from the top and the
   button 51 px under it, as on bebestschool.kz/anglikij-dlya-moryakov
   (rec568048588). */
@media (min-width: 1200px) {
    .bbs-ihero--overlap.bbs-ihero--overlap-low .bbs-ihero__inner {
        min-height: 510px;
    }

    .bbs-ihero--overlap.bbs-ihero--overlap-low .bbs-ihero__content {
        padding-top: 135px;
    }

    .bbs-ihero--overlap.bbs-ihero--overlap-low .bbs-ihero__btn {
        margin-top: 51px;
    }

    .bbs-ihero--overlap.bbs-ihero--overlap-low .bbs-ihero__media {
        margin: 38px 51px 0 auto;
    }
}

/* "bbs-ihero--tall" (the block's Additional CSS class): on a computer, for a
   tall picture, as on bebestschool.kz/english-job-interview and
   /grammar-english — the picture 18 px from the band's top and 20 px past
   the grid's edge, the heading and the button 23 px under it centred on it. */
@media (min-width: 1200px) {
    .bbs-ihero--tall {
        padding: 18px 0 63px;
    }

    .bbs-ihero--tall .bbs-ihero__content {
        align-self: center;
        margin-top: 0;
    }

    .bbs-ihero--tall .bbs-ihero__btn {
        margin-top: 23px;
    }

    .bbs-ihero--tall .bbs-ihero__media {
        margin-right: -20px;
    }
}

/* ── Test look ──
   bebestschool.kz/english-test, rec640033692: a 45 px bold #171515 heading
   510 px wide 60 px from the top, 20 px text 32 px under it, a 320 × 55
   green button rounded 30 px in 15 px semi-bold capitals 57 px lower,
   centred under the text; the picture (506 px) on the right, 60 px from the
   top; the band 540 px high. Narrower: heading, picture, text, button, centred. */
.bbs-ihero--test {
    padding: 60px 0 40px;
}

.bbs-ihero--test .bbs-ihero__inner {
    align-items: flex-start;
}

.bbs-ihero--test .bbs-ihero__content {
    display: flex;
    flex: 0 1 600px;
    flex-direction: column;
    padding-left: 20px;
}

.bbs-ihero--test .bbs-ihero__title {
    max-width: 510px;
    color: #171515;
    font-size: 45px;
    line-height: 50px;
}

.bbs-ihero--test .bbs-ihero__text {
    max-width: 581px;
    margin-top: 32px;
    line-height: 26px;
}

.bbs-ihero--test .bbs-ihero__btn {
    align-self: flex-start;
    min-width: 320px;
    min-height: 55px;
    margin: 57px 0 0 130px;
    border-radius: 30px;
    background: #2eb45b;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.bbs-ihero--test .bbs-ihero__media {
    flex: 0 0 506px;
    margin: 0 20px 0 auto;
}

@media (min-width: 1200px) {
    .bbs-ihero--test {
        box-sizing: border-box;
        min-height: 540px;
    }

    /* With "bbs-ihero--roomy" too: a 580 px band with the picture 20 px
       lower, as on bebestschool.kz/german-test and /spanish-test. */
    .bbs-ihero--test.bbs-ihero--roomy {
        min-height: 580px;
    }

    .bbs-ihero--test.bbs-ihero--roomy .bbs-ihero__media {
        margin-top: 20px;
    }
}

@media (max-width: 1199px) {
    .bbs-ihero--test .bbs-ihero__content {
        padding-left: 0;
    }

    .bbs-ihero--test .bbs-ihero__title {
        font-size: 45px;
        line-height: 50px;
    }

    .bbs-ihero--test .bbs-ihero__text {
        max-width: 473px;
    }

    .bbs-ihero--test .bbs-ihero__btn {
        margin-left: 50px;
    }

    .bbs-ihero--test .bbs-ihero__media {
        flex-basis: 475px;
        margin-right: 0;
    }
}

@media (max-width: 959px) {
    .bbs-ihero--test .bbs-ihero__inner {
        align-items: center;
    }

    .bbs-ihero--test .bbs-ihero__content {
        display: contents;
    }

    .bbs-ihero--test .bbs-ihero__title {
        order: 0;
        max-width: 560px;
        margin: 0 auto;
    }

    .bbs-ihero--test .bbs-ihero__media {
        flex: none;
        order: 1;
        width: 475px;
        max-width: 100%;
        margin: 15px 0 0;
    }

    .bbs-ihero--test .bbs-ihero__text {
        order: 2;
        max-width: 640px;
        margin: 86px auto 0;
    }

    .bbs-ihero--test .bbs-ihero__btn {
        order: 3;
        align-self: center;
        min-width: 300px;
        margin: 50px 0 0;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--test .bbs-ihero__title {
        max-width: 320px;
        font-size: 28px;
        line-height: 31px;
    }

    .bbs-ihero--test .bbs-ihero__media {
        width: 320px;
        margin-top: 26px;
    }

    .bbs-ihero--test .bbs-ihero__text {
        max-width: 320px;
        margin-top: 85px;
    }

    .bbs-ihero--test .bbs-ihero__btn {
        min-width: 290px;
        min-height: 58px;
        margin-top: 40px;
        font-size: 14px;
    }
}

/* Subtitle: a bold line under the heading, as on bebestschool.kz/speaking-club
   (26 px at 34 px, 8 px under the heading). */
.bbs-ihero__subtitle {
    margin: 8px 0 0;
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
}

.bbs-ihero__subtitle + .bbs-ihero__text {
    margin-top: 9px;
}

@media (max-width: 959px) {
    .bbs-ihero--test .bbs-ihero__subtitle {
        order: 0;
        max-width: 560px;
        margin: 9px auto 0;
    }
}

@media (max-width: 639px) {
    .bbs-ihero__subtitle {
        font-size: 22px;
        line-height: 29px;
    }

    .bbs-ihero--test .bbs-ihero__subtitle {
        max-width: 320px;
    }
}

/* "bbs-ihero--club" (the block's Additional CSS class), with the test look:
   bebestschool.kz/speaking-club, rec422427730 — the text 498 px, the button
   80 px in, the picture 626 px, the band 560 px. */
@media (min-width: 1200px) {
    .bbs-ihero--club {
        min-height: 560px;
    }

    .bbs-ihero--club .bbs-ihero__content {
        padding-left: 0;
    }

    .bbs-ihero--club .bbs-ihero__text {
        max-width: 498px;
    }

    .bbs-ihero--club .bbs-ihero__btn {
        margin: 27px 0 0 100px;
    }

    .bbs-ihero--club .bbs-ihero__media {
        flex-basis: 626px;
        margin-right: -20px;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--club .bbs-ihero__title {
        font-size: 36px;
        line-height: 40px;
    }

    .bbs-ihero--club .bbs-ihero__text {
        order: 0;
        margin-top: 29px;
        font-size: 18px;
        line-height: 23px;
    }

    .bbs-ihero--club .bbs-ihero__media {
        order: 1;
        margin-top: 229px;
    }

    .bbs-ihero--club .bbs-ihero__btn {
        min-width: 250px;
        min-height: 50px;
    }
}

/* "bbs-ihero--square" (the block's Additional CSS class): on a computer a
   square picture fills the band's height, top to bottom, the heading 75 px
   from the top, as on bebestschool.kz/german-real-talk (rec535312894). */
@media (min-width: 1200px) {
    .bbs-ihero--square {
        padding: 0;
    }

    .bbs-ihero--square .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--square .bbs-ihero__content {
        margin-top: 75px;
    }

    .bbs-ihero--square .bbs-ihero__media {
        margin-right: 60px;
    }
}

/* With "bbs-ihero--square-low" too: a wider picture 59 px down and 680 px
   in, the heading 73 px from the top and the button 14 px under it, as on
   bebestschool.kz/german-course-for-medical (rec542817231). */
@media (min-width: 1200px) {
    .bbs-ihero--square.bbs-ihero--square-low .bbs-ihero__content {
        margin-top: 73px;
    }

    .bbs-ihero--square.bbs-ihero--square-low .bbs-ihero__btn {
        margin-top: 14px;
    }

    .bbs-ihero--square.bbs-ihero--square-low .bbs-ihero__media {
        margin: 59px 80px 0 auto;
    }
}

/* On phones that band drops the picture, as the original does: the heading
   40 px at 48 px 60 px from the top, the button 30 px under it, 100 px off the bottom. */
@media (max-width: 639px) {
    .bbs-ihero--square-low {
        padding: 60px 0 100px;
    }

    .bbs-ihero--square-low .bbs-ihero__media {
        display: none;
    }

    .bbs-ihero--square-low .bbs-ihero__title {
        font-size: 40px;
        line-height: 48px;
    }

    .bbs-ihero--square-low .bbs-ihero__btn {
        margin-top: 30px;
    }
}

/* With "bbs-ihero--tall-wide" too: a 653 px column for a three-line heading
   and the button 33 px under it, the picture 47 px down and 10 px past the
   grid, as on
   bebestschool.kz/kursy-anglijskogo-dlya-vzroslyh (rec597561871). */
@media (min-width: 1200px) {
    .bbs-ihero--tall.bbs-ihero--tall-wide .bbs-ihero__content {
        flex-basis: 653px;
        margin-top: 18px;
    }

    .bbs-ihero--tall.bbs-ihero--tall-wide .bbs-ihero__title {
        width: 653px;
    }

    .bbs-ihero--tall.bbs-ihero--tall-wide .bbs-ihero__btn {
        margin-top: 33px;
    }

    .bbs-ihero--tall.bbs-ihero--tall-wide .bbs-ihero__media {
        position: relative;
        top: 29px;
        margin-right: -10px;
    }
}

/* With "bbs-ihero--tall-top" too (after "bbs-ihero--tall-wide"): a
   five-line heading from the top, 28 px down, the button 22 px under it, the
   620 px picture 18 px down and 20 px past the grid, as on
   bebestschool.kz/kursy-anglijskogo-dlya-vzroslyh/beginner (rec517637886). */
@media (min-width: 1200px) {
    .bbs-ihero--tall.bbs-ihero--tall-top .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 10px;
    }

    .bbs-ihero--tall.bbs-ihero--tall-top .bbs-ihero__btn {
        margin-top: 22px;
    }

    .bbs-ihero--tall.bbs-ihero--tall-top .bbs-ihero__media {
        align-self: flex-start;
        top: 0;
        margin-right: -20px;
    }
}

/* "bbs-ihero--wide" (the block's Additional CSS class): on a computer a
   57 px heading up to 656 px wide and the picture level with its top, 99 px
   down a 578 px band, as on bebestschool.kz/kurs-korporativnogo-nemetskogo-yazyka. */
@media (min-width: 1200px) {
    .bbs-ihero--wide {
        padding: 99px 0 96px;
    }

    .bbs-ihero--wide .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--wide .bbs-ihero__content {
        margin-top: 0;
    }

    .bbs-ihero--wide .bbs-ihero__title {
        width: 656px;
        font-size: 57px;
        line-height: 68px;
    }

    .bbs-ihero--wide .bbs-ihero__media {
        margin-top: 0;
        margin-right: 24px;
    }

    /* With "bbs-ihero--big" too: a 62 px heading 568 px wide 111 px down,
       the button 77 px under it and the picture 50 px in from the grid's
       edge, as on bebestschool.kz/kurs-korporativnogo-ispanskogo-yazyka. */
    .bbs-ihero--wide.bbs-ihero--big {
        padding: 104px 0 91px;
    }

    .bbs-ihero--wide.bbs-ihero--big .bbs-ihero__content {
        margin-top: 7px;
    }

    .bbs-ihero--wide.bbs-ihero--big .bbs-ihero__title {
        width: 568px;
        font-size: 62px;
        line-height: 74px;
    }

    .bbs-ihero--wide.bbs-ihero--big .bbs-ihero__btn {
        margin-top: 77px;
    }

    .bbs-ihero--wide.bbs-ihero--big .bbs-ihero__media {
        margin-right: 50px;
    }
}

/* "bbs-ihero--plain-btn" (the block's Additional CSS class), with the test
   look: the button flush with the text, 29 px under it, as on
   bebestschool.kz/german/speaking-club (rec895679713). */
@media (min-width: 960px) {
    .bbs-ihero--plain-btn .bbs-ihero__title {
        max-width: 515px;
        line-height: 56px;
    }

    .bbs-ihero--plain-btn .bbs-ihero__text {
        max-width: 499px;
        margin-top: 31px;
    }

    .bbs-ihero--plain-btn .bbs-ihero__btn {
        margin: 29px 0 0;
        font-size: 17px;
        text-transform: none;
    }

    .bbs-ihero--plain-btn .bbs-ihero__media {
        flex-basis: 481px;
        margin-top: -3px;
        margin-right: 86px;
    }
}

@media (min-width: 1200px) {
    .bbs-ihero--plain-btn .bbs-ihero__content {
        padding-left: 0;
    }
}

@media (max-width: 959px) {
    /* The text under the heading, the picture after it. */
    .bbs-ihero--plain-btn .bbs-ihero__text {
        order: 0;
        margin-top: 15px;
    }

    .bbs-ihero--plain-btn .bbs-ihero__media {
        margin-top: 30px;
    }

    .bbs-ihero--plain-btn .bbs-ihero__btn {
        margin-top: 20px;
        text-transform: none;
    }
}

/* "bbs-ihero--framed" (the block's Additional CSS class): a rectangular
   photo rounded 50 px with a green copy of it 16 px left and 27 px lower,
   as on bebestschool.kz/spanish-course/spanish-for-children (rec708435156). */
.bbs-ihero--framed .bbs-ihero__img {
    border-radius: 50px;
    box-shadow: -16px 27px 0 #1cb65a;
}

@media (min-width: 1200px) {
    .bbs-ihero--framed .bbs-ihero__media {
        margin-top: 13px;
        margin-right: 79px;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--framed .bbs-ihero__img {
        border-radius: 30px;
        box-shadow: -10px 16px 0 #1cb65a;
    }
}

/* "bbs-ihero--high" (the block's Additional CSS class), on a computer: the
   heading 653 px wide 43 px from the top with the button 25 px under it, the
   picture 79 px down at the grid's edge, as on
   bebestschool.kz/speaking-club-spanish (rec1125726161). */
@media (min-width: 1200px) {
    .bbs-ihero--high {
        padding-top: 43px;
    }

    .bbs-ihero--high .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--high .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 0;
    }

    .bbs-ihero--high .bbs-ihero__title {
        width: 653px;
    }

    .bbs-ihero--high .bbs-ihero__btn {
        margin-top: 25px;
    }

    .bbs-ihero--high .bbs-ihero__media {
        margin: 36px 7px 0 auto;
    }
}

/* With "bbs-ihero--snug" too: the heading 59 px from the top, the button
   9 px under it, the picture 12 px above the heading and 50 px in from the
   grid's edge, as on bebestschool.kz/grupovue-kursu-ispanskogo-yazika
   (rec1291773921). */
@media (min-width: 1200px) {
    .bbs-ihero--high.bbs-ihero--snug {
        padding-top: 59px;
    }

    .bbs-ihero--high.bbs-ihero--snug .bbs-ihero__btn {
        margin-top: 9px;
    }

    .bbs-ihero--high.bbs-ihero--snug .bbs-ihero__media {
        margin: -12px 50px 0 auto;
    }
}

/* "bbs-ihero--lift" (the block's Additional CSS class), on a computer: a
   picture taller than the 540 px band rises 21 px above it to sit on its
   bottom, 107 px in from the grid's edge; the heading 110 px down with the
   button 26 px under it, as on bebestschool.kz/italiano-course/italiano-beginner
   (rec724900317). */
@media (min-width: 1200px) {
    .bbs-ihero--lift {
        padding: 0;
    }

    .bbs-ihero--lift .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--lift .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 110px;
    }

    .bbs-ihero--lift .bbs-ihero__btn {
        margin-top: 26px;
    }

    .bbs-ihero--lift .bbs-ihero__media {
        position: relative;
        z-index: 1;
        margin: -21px 107px 0 auto;
    }
}

/* "bbs-ihero--mid" (the block's Additional CSS class), on a computer: the
   heading 68 px from the top with the button 40 px under it, the picture
   18 px lower than the heading, 160 px in from the grid's edge, as on
   bebestschool.kz/italiano-course/italiano-for-children (rec725488527). */
@media (min-width: 1200px) {
    .bbs-ihero--mid {
        padding-top: 68px;
    }

    .bbs-ihero--mid .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--mid .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 0;
    }

    .bbs-ihero--mid .bbs-ihero__btn {
        margin-top: 40px;
    }

    .bbs-ihero--mid .bbs-ihero__media {
        margin: 18px 160px 0 auto;
    }
}

/* With "bbs-ihero--big-wide" too: the heading 601 px wide and the picture
   4 px higher, 31 px in from the grid's edge, as on
   bebestschool.kz/kurs-korporativnogo-italianskogo-yazyka (rec696910202). */
@media (min-width: 1200px) {
    .bbs-ihero--wide.bbs-ihero--big.bbs-ihero--big-wide {
        padding-bottom: 104px;
    }

    .bbs-ihero--wide.bbs-ihero--big.bbs-ihero--big-wide .bbs-ihero__title {
        width: 601px;
    }

    .bbs-ihero--wide.bbs-ihero--big.bbs-ihero--big-wide .bbs-ihero__media {
        margin: -4px 31px 0 auto;
    }
}

/* With "bbs-ihero--peak" too: the heading 40 px from the top and the
   picture at the band's very top, 125 px in from the grid's edge, as on
   bebestschool.kz/speaking-club-italian (rec1135811721). */
@media (min-width: 1200px) {
    .bbs-ihero--high.bbs-ihero--peak {
        padding-top: 40px;
    }

    .bbs-ihero--high.bbs-ihero--peak .bbs-ihero__media {
        margin: -40px 125px 0 auto;
    }
}

/* With "bbs-ihero--snug-tall" too: a tall picture 8 px from the band's top,
   142 px in from the grid's edge, as on
   bebestschool.kz/grupovue-kursu-italyanskogo-yazika (rec1319309321). */
@media (min-width: 1200px) {
    .bbs-ihero--high.bbs-ihero--snug.bbs-ihero--snug-tall .bbs-ihero__media {
        margin: -51px 142px 0 auto;
    }
}

/* "bbs-ihero--top" (the block's Additional CSS class), on a computer: a
   517 px heading 42 px from the top with the button 13 px under it, the
   picture at the band's very top, 60 px in from the grid's edge, as on
   bebestschool.kz/speaking-club-polish (rec1131159326). */
@media (min-width: 1200px) {
    .bbs-ihero--top {
        padding: 0;
    }

    .bbs-ihero--top .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--top .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 42px;
    }

    .bbs-ihero--top .bbs-ihero__title {
        width: 517px;
    }

    .bbs-ihero--top .bbs-ihero__btn {
        margin-top: 13px;
    }

    .bbs-ihero--top .bbs-ihero__media {
        margin: 0 60px 0 auto;
    }
}

/* "bbs-ihero--rise" (the block's Additional CSS class), on a computer: a
   564 px heading 39 px from the top with the button 16 px under it, the
   picture rising 53 px above the band to sit on its bottom, 60 px in from
   the grid's edge, as on bebestschool.kz/speaking-club-portuguese
   (rec1140544406). */
@media (min-width: 1200px) {
    .bbs-ihero--rise {
        padding: 0;
    }

    .bbs-ihero--rise .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--rise .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 39px;
    }

    .bbs-ihero--rise .bbs-ihero__title {
        width: 564px;
    }

    .bbs-ihero--rise .bbs-ihero__btn {
        margin-top: 16px;
    }

    .bbs-ihero--rise .bbs-ihero__media {
        position: relative;
        z-index: 1;
        margin: -53px 60px 0 auto;
    }
}

/* On phones it fills the width, 316 px, as the original's. */
@media (max-width: 639px) {
    .bbs-ihero--rise .bbs-ihero__media {
        width: min(316px, 100%);
    }
}

/* With "bbs-ihero--rise-low" too: the picture rises only 36 px and sits
   92 px in from the grid's edge, as on
   bebestschool.kz/grupovue-kursu-portugalskogo-yazika (rec1300793611). */
@media (min-width: 1200px) {
    .bbs-ihero--rise.bbs-ihero--rise-low .bbs-ihero__media {
        margin: -36px 92px 0 auto;
    }
}

/* "bbs-ihero--kids" (the block's Additional CSS class): a pink heading and a
   purple button, as on bebestschool.kz/french-language-course/french-for-children
   (rec839811664); on a computer the heading 73 px from the top, the button
   27 px under it, the picture 40 px above the heading and 105 px in from the grid's edge. */
.bbs-ihero.bbs-ihero--kids .bbs-ihero__title {
    color: #f26699;
}

.bbs-ihero.bbs-ihero--kids .bbs-ihero__btn {
    background: #4b23db;
}

.bbs-ihero.bbs-ihero--kids .bbs-ihero__btn:hover,
.bbs-ihero.bbs-ihero--kids .bbs-ihero__btn:focus-visible {
    background: #3a19b3;
}

@media (min-width: 1200px) {
    .bbs-ihero--kids {
        padding-top: 73px;
    }

    .bbs-ihero--kids .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--kids .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 0;
    }

    .bbs-ihero--kids .bbs-ihero__btn {
        margin-top: 27px;
    }

    .bbs-ihero--kids .bbs-ihero__media {
        margin: -40px 105px 0 auto;
    }
}

@media (max-width: 639px) {
    .bbs-ihero--kids .bbs-ihero__media {
        width: min(320px, 100%);
    }
}

/* "bbs-ihero--wide-pic" (the block's Additional CSS class), on a computer:
   the heading 73 px from the top with the button 38 px under it, a tall
   picture 28 px above the band, 81 px in from the grid's edge, as on
   bebestschool.kz/french-language-course/french-beginner (rec748248251). */
@media (min-width: 1200px) {
    .bbs-ihero--wide-pic {
        padding: 73px 0 0;
    }

    .bbs-ihero--wide-pic .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--wide-pic .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 0;
    }

    .bbs-ihero--wide-pic .bbs-ihero__btn {
        margin-top: 38px;
    }

    .bbs-ihero--wide-pic .bbs-ihero__media {
        position: relative;
        z-index: 1;
        margin: -45px 81px 0 auto;
    }
}

/* With "bbs-ihero--kids-tall" too: a four-line heading 653 px wide with the button 20 px
   under it, the picture 10 px above the heading and 57 px in from the grid's
   edge, as on bebestschool.kz/kurs-podgotovki-k-ehkzamenu-dalf-i-delf
   (rec839295611). */
@media (min-width: 1200px) {
    .bbs-ihero--kids.bbs-ihero--kids-tall .bbs-ihero__title {
        width: 653px;
    }

    .bbs-ihero--kids.bbs-ihero--kids-tall .bbs-ihero__btn {
        margin-top: 20px;
    }

    .bbs-ihero--kids.bbs-ihero--kids-tall .bbs-ihero__media {
        margin: -10px 57px 0 auto;
    }
}

/* With "bbs-ihero--big-low" too: the picture 8 px lower and 27 px in from
   the grid's edge, as on bebestschool.kz/kurs-korporativnogo-frantsuzkogo-yazyka
   (rec696910587). */
@media (min-width: 1200px) {
    .bbs-ihero--wide.bbs-ihero--big.bbs-ihero--big-low .bbs-ihero__media {
        margin: 8px 27px 0 auto;
    }
}

/* "bbs-ihero--flush-top" (the block's Additional CSS class), on a computer:
   a 569 px heading 8 px from the band's top with the button 15 px under it,
   the picture level with it, 48 px in from the grid's edge, as on
   bebestschool.kz/speaking-club-french (rec1129166646). */
@media (min-width: 1200px) {
    .bbs-ihero--flush-top {
        padding: 8px 0 0;
    }

    .bbs-ihero--flush-top .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--flush-top .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 0;
    }

    .bbs-ihero--flush-top .bbs-ihero__title {
        width: 569px;
    }

    .bbs-ihero--flush-top .bbs-ihero__btn {
        margin-top: 15px;
    }

    .bbs-ihero--flush-top .bbs-ihero__media {
        margin: 2px 48px 0 auto;
    }
}

/* "bbs-ihero--top-pic" (the block's Additional CSS class), on a computer: a
   576 px heading 45 px from the top with the button 23 px under it, the
   picture at the band's very top, 61 px in from the grid's edge, as on
   bebestschool.kz/grupovue-kursu-franzyskogo-yazika (rec1286117021). */
@media (min-width: 1200px) {
    .bbs-ihero--top-pic {
        padding: 45px 0 0;
    }

    .bbs-ihero--top-pic .bbs-ihero__inner {
        align-items: flex-start;
    }

    .bbs-ihero--top-pic .bbs-ihero__content {
        align-self: flex-start;
        margin-top: 0;
    }

    .bbs-ihero--top-pic .bbs-ihero__title {
        width: 576px;
    }

    .bbs-ihero--top-pic .bbs-ihero__btn {
        margin-top: 23px;
    }

    .bbs-ihero--top-pic .bbs-ihero__media {
        margin: -45px 61px 0 auto;
    }
}

/* With "bbs-ihero--mid-high" too: the heading 75 px from the top and the
   picture level with it, 88 px in from the grid's edge, as on
   bebestschool.kz/german-beginners-course-children (rec542742129). */
@media (min-width: 1200px) {
    .bbs-ihero--mid.bbs-ihero--mid-high {
        padding-top: 75px;
    }

    .bbs-ihero--mid.bbs-ihero--mid-high .bbs-ihero__btn {
        margin-top: 28px;
    }

    .bbs-ihero--mid.bbs-ihero--mid-high .bbs-ihero__media {
        margin: -13px 88px 0 auto;
    }
}