/**
 * Media text block.
 *
 * Values mirror the Tilda originals (bebestschool.kz/kursy-matematiki):
 *
 *   green  rec817502575: a #1cb65a band, a 34 px bold white heading, 60 px
 *          from the top; 61 px under it a 365 px picture 15 px into the
 *          grid and, 82 px to its right, 18 px white text at 28 px.
 *   white  rec817502582: a 40 px bold heading 40 px from the top; 53 px
 *          under it a 380 px picture 60 px into the grid and, 81 px to its
 *          right, 18 px text at 23 px.
 *
 * Narrower, the text comes first and the picture under it: the green one
 * centred from 959 px down, the white one from 1199 px down.
 */

.bbs-mtext {
    --bbs-mtext-media: 380px;
    --bbs-mtext-gap: 81px;
    --bbs-mtext-indent: 60px;

    padding: 40px 0 79px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-font, 'ApercuPro', Arial, sans-serif);
}

.bbs-mtext__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bbs-mtext__title {
    margin: 0 auto;
    color: inherit;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    text-align: center;
}

.bbs-mtext__body {
    display: flex;
    align-items: flex-start;
    gap: var(--bbs-mtext-gap);
    margin-top: 50px;
    padding-left: var(--bbs-mtext-indent);
}

.bbs-mtext__media {
    flex: 0 0 var(--bbs-mtext-media);
    margin-top: 3px;
}

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

.bbs-mtext__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    line-height: 23px;
    font-weight: 400;
}

.bbs-mtext__text > * {
    margin: 0;
}

.bbs-mtext__text > * + * {
    margin-top: 1lh;
}

.bbs-mtext__text strong,
.bbs-mtext__text b {
    font-weight: 700;
}

.bbs-mtext__text ul,
.bbs-mtext__text ol {
    padding-left: 20px;
}

.bbs-mtext__text a {
    color: inherit;
}

/* ── Green band ── */
.bbs-mtext--green {
    --bbs-mtext-media: 365px;
    --bbs-mtext-gap: 82px;
    --bbs-mtext-indent: 35px;

    padding: 60px 0 90px;
    background: #1cb65a;
    color: #ffffff;
}

.bbs-mtext--green .bbs-mtext__inner {
    max-width: 1240px;
}

.bbs-mtext--green .bbs-mtext__title {
    font-size: 34px;
    line-height: 53px;
}

.bbs-mtext--green .bbs-mtext__body {
    margin-top: 49px;
}

.bbs-mtext--green .bbs-mtext__media {
    margin-top: 12px;
}

.bbs-mtext--green .bbs-mtext__text {
    line-height: 28px;
}

/* ── 1199 and below ── */
@media (max-width: 1199px) {
    .bbs-mtext--green {
        --bbs-mtext-gap: 72px;
        --bbs-mtext-indent: 0px;
    }

    .bbs-mtext--green .bbs-mtext__title {
        font-size: 30px;
        line-height: 47px;
    }

    .bbs-mtext--green .bbs-mtext__body {
        margin-top: 45px;
    }

    .bbs-mtext--green .bbs-mtext__media {
        flex-basis: 340px;
        margin-top: 31px;
    }

    /* White: the text first, the picture under it. */
    .bbs-mtext--white {
        padding: 25px 0 60px;
    }

    .bbs-mtext--white .bbs-mtext__title {
        max-width: 580px;
    }

    .bbs-mtext--white .bbs-mtext__body {
        flex-direction: column;
        align-items: center;
        gap: 11px;
        margin-top: 25px;
        padding-left: 0;
    }

    .bbs-mtext--white .bbs-mtext__media {
        flex: none;
        order: 1;
        width: 520px;
        max-width: 100%;
        margin-top: 0;
    }

    .bbs-mtext--white .bbs-mtext__text {
        flex: none;
        width: 100%;
    }
}

/* ── 959 and below: all stacked ── */
@media (max-width: 959px) {
    .bbs-mtext__inner,
    .bbs-mtext--green .bbs-mtext__inner {
        max-width: 640px;
    }

    .bbs-mtext--green .bbs-mtext__title {
        line-height: 38px;
    }

    .bbs-mtext--green .bbs-mtext__body {
        flex-direction: column;
        align-items: center;
        gap: 59px;
        margin-top: 14px;
        text-align: center;
    }

    .bbs-mtext--green .bbs-mtext__media {
        flex: none;
        order: 1;
        width: 400px;
        max-width: 100%;
        margin-top: 0;
    }

    .bbs-mtext--green .bbs-mtext__text {
        flex: none;
        width: 100%;
    }

    .bbs-mtext--white {
        padding-top: 30px;
    }

    .bbs-mtext--white .bbs-mtext__media {
        width: 600px;
    }

    .bbs-mtext--white .bbs-mtext__text {
        text-align: center;
    }
}

@media (max-width: 639px) {
    .bbs-mtext__inner,
    .bbs-mtext--green .bbs-mtext__inner {
        max-width: 360px;
    }

    .bbs-mtext__title,
    .bbs-mtext--green .bbs-mtext__title {
        font-size: 26px;
        line-height: 33px;
    }

    .bbs-mtext--green {
        padding-bottom: 60px;
    }

    .bbs-mtext--green .bbs-mtext__body {
        gap: 30px;
    }

    .bbs-mtext--green .bbs-mtext__text {
        font-size: 14px;
        line-height: 22px;
    }

    .bbs-mtext--green .bbs-mtext__media {
        width: 320px;
    }

    .bbs-mtext--white {
        padding-top: 27px;
    }

    .bbs-mtext--white .bbs-mtext__text {
        font-size: 14px;
        line-height: 18px;
        text-align: left;
    }

    .bbs-mtext--white .bbs-mtext__media {
        width: 280px;
    }
}

/* ── Yellow look ──
   bebestschool.kz/spanish-course, rec548657520 and rec548657524: on
   #ffd62c, the picture (440 px, or as set) on the left, 10 px into the
   margin, and beside it a 40 px bold heading 15 px lower with 20 px text
   17 px under it. Stacked below 960 px: heading, text, picture. */
.bbs-mtext--yellow {
    --bbs-mtext-media: 440px;

    padding: 45px 0 40px;
    background: #ffd62c;
}

.bbs-mtext--yellow .bbs-mtext__inner {
    display: grid;
    grid-template-columns: var(--bbs-mtext-media) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 30px;
}

.bbs-mtext--yellow .bbs-mtext__body {
    display: contents;
}

.bbs-mtext--yellow .bbs-mtext__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0 0 0 -10px;
}

.bbs-mtext--yellow .bbs-mtext__title {
    grid-column: 2;
    grid-row: 1;
    margin: 15px 0 0;
    font-size: 40px;
    line-height: 1.15;
    text-align: left;
}

.bbs-mtext--yellow .bbs-mtext__text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 17px;
    font-size: 20px;
    line-height: 28px;
}

@media (max-width: 1199px) {
    .bbs-mtext--yellow .bbs-mtext__inner {
        grid-template-columns: min(var(--bbs-mtext-media), 40%) minmax(0, 1fr);
    }

    .bbs-mtext--yellow .bbs-mtext__title {
        font-size: 34px;
    }

    .bbs-mtext--yellow .bbs-mtext__text {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 959px) {
    .bbs-mtext--yellow {
        padding: 60px 0 50px;
    }

    .bbs-mtext--yellow .bbs-mtext__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bbs-mtext--yellow .bbs-mtext__title {
        margin: 0;
        font-size: 40px;
        line-height: 50px;
        text-align: center;
    }

    .bbs-mtext--yellow .bbs-mtext__text {
        order: 1;
        width: 100%;
        margin-top: 15px;
        font-size: 20px;
        text-align: center;
    }

    .bbs-mtext--yellow .bbs-mtext__media {
        order: 2;
        width: var(--bbs-mtext-media);
        max-width: 100%;
        margin: 20px 0 0;
    }
}

@media (max-width: 639px) {
    .bbs-mtext--yellow {
        padding: 30px 0 40px;
    }

    .bbs-mtext--yellow .bbs-mtext__title {
        font-size: 26px;
        line-height: 33px;
    }

    .bbs-mtext--yellow .bbs-mtext__text {
        font-size: 14px;
        line-height: 22px;
        text-align: left;
    }

    .bbs-mtext--yellow .bbs-mtext__media {
        width: 320px;
    }
}

/* A list straight under the line that introduces it. */
.bbs-mtext__text > p + ul,
.bbs-mtext__text > p + ol {
    margin-top: 0;
}

/* ── Yellow, heading above ──
   bebestschool.kz/kurs-portugalskogo-yazyka, rec761294959 and rec761294963:
   the heading centred across the band, 42 px from the top, then the picture
   (335 px, or as set) 60 px into the grid and the text beside it. */
.bbs-mtext--yellow-top .bbs-mtext__inner {
    column-gap: 55px;
}

.bbs-mtext--yellow-top .bbs-mtext__title {
    grid-column: 1 / -1;
    max-width: 1160px;
    margin: 0 auto 17px;
    text-align: center;
}

.bbs-mtext--yellow-top .bbs-mtext__media {
    grid-row: 2 / span 2;
    margin: 12px 0 0 60px;
}

.bbs-mtext--yellow-top .bbs-mtext__text {
    grid-row: 2;
    margin-top: 0;
}

@media (max-width: 1199px) {
    .bbs-mtext--yellow-top .bbs-mtext__media {
        margin-left: 0;
    }
}

@media (max-width: 959px) {
    .bbs-mtext--yellow-top .bbs-mtext__title {
        margin-bottom: 0;
    }

    .bbs-mtext--yellow-top .bbs-mtext__media {
        margin: 20px 0 0;
    }
}

/* The picture level with the middle of the text beside it, as on the
   original, when there is room for them side by side. */
@media (min-width: 960px) {
    .bbs-mtext--yellow-top .bbs-mtext__media {
        align-self: center;
        margin-top: 0;
    }
}

/* ── Text on the left ──
   bebestschool.kz/korporativnyj-anglijskij, rec566437216: on white, a 34 px
   bold green heading and 20 px text in a 560 px column on the left, the
   picture (549 px, or as set) on the right, 100 px below the heading's top. */
.bbs-mtext--text-left {
    --bbs-mtext-media: 549px;

    padding: 20px 0 78px;
}

.bbs-mtext--text-left .bbs-mtext__inner {
    display: grid;
    grid-template-columns: minmax(0, 560px) var(--bbs-mtext-media);
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    column-gap: 40px;
}

.bbs-mtext--text-left .bbs-mtext__body {
    display: contents;
}

.bbs-mtext--text-left .bbs-mtext__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #1cb65a;
    font-size: 34px;
    line-height: 53px;
    text-align: left;
}

.bbs-mtext--text-left .bbs-mtext__text {
    grid-column: 1;
    grid-row: 2;
    margin-top: 14px;
    font-size: 20px;
    line-height: 31px;
}

.bbs-mtext--text-left .bbs-mtext__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 100px 0 0;
}

@media (max-width: 1199px) {
    .bbs-mtext--text-left .bbs-mtext__inner {
        grid-template-columns: minmax(0, 1fr) min(var(--bbs-mtext-media), 45%);
    }

    .bbs-mtext--text-left .bbs-mtext__text {
        font-size: 18px;
        line-height: 28px;
    }
}

@media (max-width: 959px) {
    .bbs-mtext--text-left .bbs-mtext__inner {
        display: flex;
        flex-direction: column;
    }

    .bbs-mtext--text-left .bbs-mtext__title {
        text-align: center;
    }

    .bbs-mtext--text-left .bbs-mtext__text {
        order: 1;
        width: 100%;
    }

    .bbs-mtext--text-left .bbs-mtext__media {
        order: 2;
        align-self: center;
        width: 100%;
        max-width: var(--bbs-mtext-media);
        margin: 30px 0 0;
    }
}

@media (max-width: 639px) {
    .bbs-mtext--text-left .bbs-mtext__title {
        font-size: 26px;
        line-height: 33px;
    }

    .bbs-mtext--text-left .bbs-mtext__text {
        font-size: 16px;
        line-height: 24px;
    }
}

/* "bbs-mtext--long" (the block's Additional CSS class), with the yellow look,
   on a computer: for a long text — the text in 20 px medium at 31 px,
   736 px wide, the heading 699 px at 44 px, 27 px off the bottom, as on
   bebestschool.kz/grupovue-kursu-ispanskogo-yazika (rec1291773931). With
   "bbs-mtext--flush" too the heading sits 14 px from the top, the text 19 px
   under it, the picture 45 px down, 14 px off the bottom, as on bebestschool.kz/speaking-club-spanish
   (rec1125726166). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--long {
        padding-bottom: 27px;
    }

    .bbs-mtext--yellow.bbs-mtext--long .bbs-mtext__inner {
        column-gap: 0;
    }

    .bbs-mtext--yellow.bbs-mtext--long .bbs-mtext__title {
        max-width: 699px;
        line-height: 44px;
    }

    .bbs-mtext--yellow.bbs-mtext--long .bbs-mtext__text {
        margin-right: -16px;
        font-weight: 500;
        line-height: 31px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--flush {
        padding: 14px 0;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--flush .bbs-mtext__title {
        margin-top: 0;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--flush .bbs-mtext__text {
        margin-top: 19px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--flush .bbs-mtext__media {
        margin-top: 31px;
    }
}

/* With "bbs-mtext--long-drop" too, on a computer: the 440 px picture 70 px
   from the top, the text 28 px lower, the band at least 587 px high, as on
   bebestschool.kz/german-course-for-medical (rec542817232). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-drop {
        box-sizing: border-box;
        min-height: 587px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-drop .bbs-mtext__media {
        margin-top: 25px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-drop .bbs-mtext__img {
        width: var(--bbs-mtext-media);
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-drop .bbs-mtext__text {
        margin-top: 28px;
    }
}

/* On phones that band keeps the original's larger type: the heading 32 px
   at 40 px 34 px from the top, the text 20 px medium at 31 px centred 310 px
   wide 28 px under it, the picture 22 px over the text's foot, at the bottom. */
@media (max-width: 639px) {
    .bbs-mtext--yellow.bbs-mtext--long-drop {
        padding: 34px 0 0;
    }

    .bbs-mtext--yellow.bbs-mtext--long-drop .bbs-mtext__title {
        margin-top: 0;
        font-size: 32px;
        line-height: 40px;
    }

    .bbs-mtext--yellow.bbs-mtext--long-drop .bbs-mtext__text {
        max-width: 310px;
        margin: 28px auto 0;
        font-size: 20px;
        line-height: 31px;
        font-weight: 500;
        text-align: center;
    }

    .bbs-mtext--yellow.bbs-mtext--long-drop .bbs-mtext__media {
        flex: none;
        position: relative;
        margin-top: -22px;
    }
}

/* "bbs-mtext--dense" (the block's Additional CSS class), with the yellow look,
   on a computer: the heading 40 px from the top at 50 px, the text 45 px
   off the picture at 25 px, 23 px under the heading and 12 px off the
   bottom, as on bebestschool.kz/speaking-club-spanish (rec1125726186). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--dense {
        padding: 25px 0 12px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense .bbs-mtext__inner {
        column-gap: 45px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense .bbs-mtext__title {
        line-height: 50px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense .bbs-mtext__text {
        margin: 23px -20px 0 0;
        line-height: 25px;
    }
}

/* With "bbs-mtext--dense-open" too, on a computer: the 560 px picture 10 px
   lower, the column straight beside it with the heading 598 px wide, the
   text 20 px under it and 13 px past the grid, 100 px off the bottom, as on
   bebestschool.kz/meditsinskiy-angliyskiy (rec568034011). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open {
        padding-bottom: 100px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open .bbs-mtext__inner {
        column-gap: 0;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open .bbs-mtext__media {
        width: var(--bbs-mtext-media);
        margin-top: 10px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open .bbs-mtext__title {
        max-width: 598px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open .bbs-mtext__text {
        margin: 20px -13px 0 0;
    }
}

/* With "bbs-mtext--dense-open-low" too, on a computer: the picture 134 px
   lower and 10 px further out, 35 px left under a long text, as on
   bebestschool.kz/anglikij-dlya-moryakov (rec568048593). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open.bbs-mtext--dense-open-low {
        padding-bottom: 35px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open.bbs-mtext--dense-open-low .bbs-mtext__media {
        margin: 134px 0 0 -20px;
    }
}

/* With "bbs-mtext--dense-open-mid" too, on a computer: the picture 67 px
   from the top and 127 px in, the text right under the heading, 60 px off
   the bottom, as on bebestschool.kz/kursy-anglijskogo-dlya-vzroslyh
   (rec597561876). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open.bbs-mtext--dense-open-mid {
        padding-bottom: 60px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open.bbs-mtext--dense-open-mid .bbs-mtext__media {
        margin: 42px 0 0 -13px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-open.bbs-mtext--dense-open-mid .bbs-mtext__text {
        margin-top: 0;
    }
}

/* On phones that band keeps the original's larger type: the heading 30 px
   at 38 px 27 px from the top, the text 18 px at 23 px centred 310 px wide
   9 px under it, the picture 34 px under the text, 126 px off the bottom. */
@media (max-width: 639px) {
    .bbs-mtext--yellow.bbs-mtext--dense-open {
        padding: 27px 0 126px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense-open .bbs-mtext__title {
        margin-top: 0;
        font-size: 30px;
        line-height: 38px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense-open .bbs-mtext__text {
        max-width: 310px;
        margin: 9px auto 0;
        font-size: 18px;
        line-height: 23px;
        text-align: center;
    }

    .bbs-mtext--yellow.bbs-mtext--dense-open .bbs-mtext__media {
        flex: none;
        margin-top: 34px;
    }
}

/* With "bbs-mtext--wide" too, on a computer: for a small picture — the
   heading 32 px from the top, the text 13 px under it, the picture 135 px
   down the band, 57 px off the bottom, as on
   bebestschool.kz/italiano-course/italiano-for-children (rec725488528). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--wide {
        padding: 17px 0 57px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--wide .bbs-mtext__text {
        margin-top: 13px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--wide .bbs-mtext__media {
        margin-top: 135px;
    }
}

/* "bbs-mtext--broad" (the block's Additional CSS class), on a computer: the
   heading runs the column's full width, as on
   bebestschool.kz/speaking-club-italian (rec1135811726 and rec1135811746);
   with "bbs-mtext--dense" the column starts 10 px nearer the picture and the
   text 13 px under the heading. */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--broad .bbs-mtext__title {
        max-width: none;
        margin-right: -16px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--broad .bbs-mtext__inner {
        column-gap: 35px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--broad .bbs-mtext__text {
        margin-top: 13px;
    }
}

/* "bbs-mtext--top-long" (the block's Additional CSS class), with the
   heading-above look, on a computer: the heading 703 px at 44 px, 42 px from
   the top; the text in 20 px medium at 31 px, 748 px wide, 35 px under it;
   the picture 16 px below the text's top, as on
   bebestschool.kz/speaking-club-polish (rec1131159331). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-long {
        padding: 42px 0 19px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long .bbs-mtext__inner {
        column-gap: 97px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long .bbs-mtext__title {
        max-width: 703px;
        margin-bottom: 35px;
        line-height: 44px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long .bbs-mtext__media {
        align-self: start;
        margin: 16px -50px 0 50px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long .bbs-mtext__text {
        margin-right: -20px;
        font-weight: 500;
        line-height: 31px;
    }
}

/* With "bbs-mtext--top-wide" too: the heading 734 px wide, the text 736 px
   from 580 px and the picture level with its top, as on
   bebestschool.kz/speaking-club-portuguese (rec1140544411). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-wide .bbs-mtext__inner {
        column-gap: 105px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-wide .bbs-mtext__title {
        max-width: 734px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-wide .bbs-mtext__media {
        margin-top: -1px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-wide .bbs-mtext__text {
        margin-right: -16px;
    }
}

/* "bbs-mtext--top-dense" (the block's Additional CSS class), with the
   heading-above look, on a computer: the heading 62 px from the top at
   50 px, the text at 25 px 11 px under it, 703 px wide from 617 px, the
   picture 21 px above the text's top, 22 px off the bottom, as on
   bebestschool.kz/speaking-club-portuguese (rec1140544431). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-dense {
        padding: 62px 0 22px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-dense .bbs-mtext__inner {
        column-gap: 137px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-dense .bbs-mtext__title {
        max-width: 965px;
        margin-bottom: 11px;
        line-height: 50px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-dense .bbs-mtext__media {
        align-self: start;
        margin: 21px -60px 0 60px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-dense .bbs-mtext__text {
        margin-right: -20px;
        line-height: 25px;
    }
}

/* With "bbs-mtext--top-narrow" too: the heading wraps at 656 px, as on
   bebestschool.kz/grupovue-kursu-portugalskogo-yazika (rec1300793621). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-narrow .bbs-mtext__title {
        max-width: 656px;
    }
}

/* "bbs-mtext--top-edge" (the block's Additional CSS class), with the
   heading-above look, on a computer: the heading 744 px at 44 px, 42 px from
   the top; the picture at the grid's edge, 53 px below the text's top; the
   text in 20 px medium at 31 px, 62 px off the picture, 60 px off the
   bottom, as on bebestschool.kz/french-language-course/french-for-children
   (rec839811665). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-edge {
        padding: 42px 0 60px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge .bbs-mtext__inner {
        column-gap: 62px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge .bbs-mtext__title {
        max-width: 744px;
        margin-bottom: 35px;
        line-height: 44px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge .bbs-mtext__media {
        align-self: start;
        margin: 53px 0 0;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge .bbs-mtext__text {
        margin-right: -16px;
        font-weight: 500;
        line-height: 31px;
    }
}

/* "bbs-mtext--top-inset" (the block's Additional CSS class), with the
   heading-above look, on a computer: the heading 657 px at 50 px, 40 px from
   the top, the text at 25 px 29 px under it, the picture 82 px in and 26 px
   below the text's top, 56 px off the bottom, as on
   bebestschool.kz/french-language-course/french-for-children (rec839811669). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-inset {
        padding: 40px 0 56px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset .bbs-mtext__inner {
        grid-template-columns: calc(var(--bbs-mtext-media) + 82px) minmax(0, 1fr);
        column-gap: 60px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset .bbs-mtext__title {
        max-width: 657px;
        margin-bottom: 29px;
        line-height: 50px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset .bbs-mtext__media {
        align-self: start;
        margin: 26px 0 0 82px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset .bbs-mtext__text {
        margin-right: -3px;
        line-height: 25px;
    }
}

/* With "bbs-mtext--top-span" too (on "bbs-mtext--top-long"): the heading up
   to 1032 px, the picture 10 px past the grid's edge and 20 px above the
   text, the text right after it, 59 px off the bottom, as on
   bebestschool.kz/french-language-course/french-beginner (rec748248253). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-span {
        padding-bottom: 59px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-span .bbs-mtext__inner {
        column-gap: 0;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-span .bbs-mtext__title {
        max-width: 1032px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-span .bbs-mtext__media {
        margin: -20px 10px 0 -10px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-span .bbs-mtext__text {
        margin-right: -16px;
    }
}

/* With "bbs-mtext--top-lift" too (on "bbs-mtext--top-inset"): the text 32 px
   under the heading, the picture 23 px in and 24 px above the text, 55 px
   off it, 78 px off the bottom, as on
   bebestschool.kz/french-language-course/french-beginner (rec748248257). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-lift {
        padding-bottom: 78px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-lift .bbs-mtext__inner {
        grid-template-columns: calc(var(--bbs-mtext-media) + 23px) minmax(0, 1fr);
        column-gap: 55px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-lift .bbs-mtext__title {
        margin-bottom: 32px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-lift .bbs-mtext__media {
        margin: -24px 0 0 23px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-lift .bbs-mtext__text {
        margin-right: -13px;
    }
}

/* "bbs-mtext--top-drop" (the block's Additional CSS class), with
   "bbs-mtext--top-edge" or "bbs-mtext--top-inset", on a computer: the picture
   set in and well below the text's top, as on
   bebestschool.kz/kurs-podgotovki-k-ehkzamenu-dalf-i-delf (rec839295612 and
   rec839295616). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-edge.bbs-mtext--top-drop {
        padding-bottom: 47px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge.bbs-mtext--top-drop .bbs-mtext__inner {
        grid-template-columns: calc(var(--bbs-mtext-media) + 69px) minmax(0, 1fr);
        column-gap: 80px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge.bbs-mtext--top-drop .bbs-mtext__title {
        max-width: 815px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-edge.bbs-mtext--top-drop .bbs-mtext__media {
        margin: 60px 0 0 69px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-drop {
        padding-bottom: 64px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-drop .bbs-mtext__inner {
        grid-template-columns: calc(var(--bbs-mtext-media) + 71px) minmax(0, 1fr);
        column-gap: 71px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-drop .bbs-mtext__title {
        margin-bottom: 51px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-inset.bbs-mtext--top-drop .bbs-mtext__media {
        margin: 80px 0 0 71px;
    }
}

/* "bbs-mtext--top-big" (the block's Additional CSS class), with the
   heading-above look, on a computer: a big picture 20 px past the grid's
   edge, 39 px above the text, under a 949 px heading 8 px from the top; the
   text at 25 px 21 px under the heading, 16 px off the bottom, as on
   bebestschool.kz/speaking-club-french (rec1129166671). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-big {
        padding: 8px 0 16px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-big .bbs-mtext__inner {
        grid-template-columns: calc(var(--bbs-mtext-media) - 43px) minmax(0, 1fr);
        column-gap: 0;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-big .bbs-mtext__title {
        max-width: 949px;
        margin-bottom: 21px;
        line-height: 50px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-big .bbs-mtext__media {
        align-self: start;
        width: var(--bbs-mtext-media);
        max-width: none;
        margin: -39px -23px 0 -20px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-big .bbs-mtext__text {
        margin-right: -12px;
        line-height: 25px;
    }
}

/* With "bbs-mtext--top-short" too (on "bbs-mtext--top-span"): 20 px off the
   bottom for a text taller than the picture, as on
   bebestschool.kz/speaking-club-french (rec1129166651). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-long.bbs-mtext--top-span.bbs-mtext--top-short {
        padding-bottom: 20px;
    }
}

/* "bbs-mtext--top-flush" (the block's Additional CSS class), with the
   heading-above look, on a computer: the heading at 44 px, 60 px from the
   top; the picture 20 px past the grid's edge, starting 22 px above the
   heading's foot; the text in 20 px medium at 31 px, 48 px under the heading,
   from 416 px into the grid to 20 px past its edge, 116 px clear of the bottom under the picture, as
   on bebestschool.kz/anglijskij-dlya-pereezda (rec522155815). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush {
        padding: 60px 0 116px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush .bbs-mtext__inner {
        grid-template-columns: calc(var(--bbs-mtext-media) - 44px) minmax(0, 1fr);
        column-gap: 0;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush .bbs-mtext__title {
        margin-bottom: 0;
        line-height: 44px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush .bbs-mtext__media {
        align-self: start;
        width: var(--bbs-mtext-media);
        margin: -22px 0 0 -20px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush .bbs-mtext__text {
        margin-top: 48px;
        margin-right: -20px;
        font-weight: 500;
        line-height: 31px;
    }
}

/* With "bbs-mtext--top-flush-tight" too: the heading 962 px wide, the text
   21 px under it; the band at least 707 px high and 42 px clear of the
   text, as on bebestschool.kz/meditsinskiy-angliyskiy (rec568034007) and
   /anglikij-dlya-moryakov (rec568048589). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-tight {
        box-sizing: border-box;
        min-height: 707px;
        padding-bottom: 42px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-tight .bbs-mtext__title {
        max-width: 962px;
        margin-right: auto;
        margin-left: auto;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-tight .bbs-mtext__text {
        margin-top: 21px;
    }
}

/* On phones the same band keeps the original's larger type: the heading
   32 px at 40 px 26 px from the top, the text 20 px medium at 31 px centred
   310 px wide 25 px under it, the picture 11 px under the text, 7 px off the bottom. */
@media (max-width: 639px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush-tight {
        padding: 26px 0 7px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-tight .bbs-mtext__title {
        font-size: 32px;
        line-height: 40px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-tight .bbs-mtext__text {
        max-width: 310px;
        margin: 25px auto 0;
        font-size: 20px;
        line-height: 31px;
        font-weight: 500;
        text-align: center;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-tight .bbs-mtext__media {
        flex: none;
        margin-top: 11px;
    }
}

/* With "bbs-mtext--top-flush-pair" too: a two-line 34 px heading at 53 px,
   1113 px wide, 35 px from the top; the picture 15 px above its foot, the
   text 21 px under it, 743 px wide; the band 627 px high, as on
   bebestschool.kz/cambridge-exams-course (rec539349480) and
   /cambridge-exams-for-children (rec538836303). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-pair {
        box-sizing: border-box;
        min-height: 627px;
        padding: 35px 0 26px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-pair .bbs-mtext__title {
        max-width: 1113px;
        margin-right: auto;
        margin-left: auto;
        font-size: 34px;
        line-height: 53px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-pair .bbs-mtext__media {
        margin-top: -15px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-pair .bbs-mtext__text {
        margin-top: 21px;
        margin-right: 1px;
    }
}

/* On phones that band keeps the original's larger type: the heading 30 px
   at 38 px 60 px from the top, the text 20 px medium at 31 px centred 310 px
   wide 20 px under it, the picture 27 px under the text, 31 px off the bottom. */
@media (max-width: 639px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush-pair {
        padding: 60px 0 31px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-pair .bbs-mtext__title {
        font-size: 30px;
        line-height: 38px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-pair .bbs-mtext__text {
        max-width: 310px;
        margin: 20px auto 0;
        font-size: 20px;
        line-height: 31px;
        font-weight: 500;
        text-align: center;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-pair .bbs-mtext__media {
        flex: none;
        margin-top: 27px;
    }
}

/* With "bbs-mtext--top-flush-wide" too: the heading 1113 px wide, the text
   87 px clear of the bottom, as on bebestschool.kz/anglikij-dlya-puteshestvij
   (rec567450527). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-wide {
        padding-bottom: 87px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-wide .bbs-mtext__title {
        max-width: 1113px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* On phones that band keeps the original's larger type: the heading 32 px
   at 40 px 26 px from the top, the text 20 px medium at 31 px centred 310 px
   wide 10 px under it, the picture 5 px under the text, 16 px off the bottom. */
@media (max-width: 639px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush-wide {
        padding: 26px 0 16px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-wide .bbs-mtext__title {
        font-size: 32px;
        line-height: 40px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-wide .bbs-mtext__text {
        max-width: 310px;
        margin: 10px auto 0;
        font-size: 20px;
        line-height: 31px;
        font-weight: 500;
        text-align: center;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-wide .bbs-mtext__media {
        flex: none;
        margin-top: 5px;
    }
}

/* On phones the one-line band keeps the originals' larger type: the
   heading 32 px at 40 px 60 px from the top, the text 20 px medium at 31 px
   centred 310 px wide 20 px under it, the picture 20 px under the text, as on
   bebestschool.kz/intensivnyj-kurs-anglijskogo/beginner (rec512443345) and
   /kursy-anglijskogo-dlya-vzroslyh (rec597561872). */
@media (max-width: 639px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush-line {
        padding: 60px 0 40px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-line .bbs-mtext__title {
        font-size: 32px;
        line-height: 40px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-line .bbs-mtext__text {
        max-width: 310px;
        margin: 20px auto 0;
        font-size: 20px;
        line-height: 31px;
        font-weight: 500;
        text-align: center;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush-line .bbs-mtext__media {
        flex: none;
        margin-top: 20px;
    }
}

/* With "bbs-mtext--top-flush-close" too (after "bbs-mtext--top-flush-wide"):
   the text 14 px under a two-line heading and 28 px clear of the bottom, as
   on bebestschool.kz/kursy-anglijskogo-dlya-vzroslyh/beginner (rec517637887). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-wide.bbs-mtext--top-flush-close {
        padding-bottom: 28px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-wide.bbs-mtext--top-flush-close .bbs-mtext__text {
        margin-top: 14px;
    }
}

/* With "bbs-mtext--top-flush-short" too: a one-line 34 px heading at 53 px,
   the picture 13 px under it, the text 32 px under it and 45 px clear of the
   bottom, as on bebestschool.kz/angliyskiy-dlya-detey/beginner (rec515412374). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-short {
        padding-bottom: 45px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-short .bbs-mtext__title {
        font-size: 34px;
        line-height: 53px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-short .bbs-mtext__media {
        margin-top: 13px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-short .bbs-mtext__text {
        margin-top: 32px;
    }
}

/* With "bbs-mtext--long-low" too (on "bbs-mtext--long"): the text 13 px
   under the heading and 46 px off the bottom, as on
   bebestschool.kz/german-beginners-course-children (rec542742130). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-low {
        padding-bottom: 50px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-low .bbs-mtext__inner {
        column-gap: 8px;
    }

    .bbs-mtext--yellow.bbs-mtext--long.bbs-mtext--long-low .bbs-mtext__text {
        margin-top: 13px;
    }
}

/* With "bbs-mtext--dense-in" too (on "bbs-mtext--dense"): the picture 40 px
   into the grid, the heading 598 px wide and the text 613 px from 700 px,
   15 px under the heading, as on
   bebestschool.kz/german-beginners-course-children (rec542742134). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in {
        padding-bottom: 20px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in .bbs-mtext__inner {
        column-gap: 53px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in .bbs-mtext__media {
        margin: 10px 0 0 30px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in .bbs-mtext__title {
        max-width: 598px;
        margin-left: -3px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in .bbs-mtext__text {
        max-width: 613px;
        margin: 15px 0 0;
    }
}

/* With "bbs-mtext--dense-in-tight" too: the text right under the heading,
   the band 590 px high, as on bebestschool.kz/german-course-for-medical
   (rec542817236). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in.bbs-mtext--dense-in-tight {
        box-sizing: border-box;
        min-height: 590px;
    }

    .bbs-mtext--yellow.bbs-mtext--dense.bbs-mtext--dense-in.bbs-mtext--dense-in-tight .bbs-mtext__text {
        margin-top: 0;
    }
}

/* With "bbs-mtext--top-flush-line" too: a one-line 40 px heading at 62 px,
   the picture 4 px under it, the text 40 px under it, as on
   bebestschool.kz/intensivnyj-kurs-anglijskogo/beginner (rec512443345). */
@media (min-width: 1200px) {
    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-line {
        padding-bottom: 28px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-line .bbs-mtext__title {
        line-height: 62px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-line .bbs-mtext__media {
        margin-top: 4px;
    }

    .bbs-mtext--yellow-top.bbs-mtext--top-flush.bbs-mtext--top-flush-line .bbs-mtext__text {
        margin-top: 40px;
    }
}