.intro-split-icon {
    width: 3rem;
    height: 3rem;
}

/* Як TW: w-64 → sm:w-80 → lg:w-96 (одна шкала для обох фреймворків) */
.intro-split-thumb {
    width: 16rem;
    height: 16rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .intro-split-thumb {
        width: 20rem;
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .intro-split-thumb {
        width: 24rem;
        height: 24rem;
    }
}

/* Bootstrap: flex + gap (no .row negative margins; works with section overflow). Tailwind grid ignores flex on items. */
@media (min-width: 576px) {
    .intro-split-benefits__row > * {
        flex: 1 1 0%;
        min-width: 0;
    }
}

.content-ledger__label {
    letter-spacing: 0.05em;
}

.tips-numbered__card {
    max-width: 24rem;
}

.tips-numbered__thumb {
    width: 4rem;
    height: 4rem;
}

.mosaic-bento-hero__lead {
  min-height: 380px;
}

.mosaic-bento-hero__rail {
  max-width: 20rem;
}

.mosaic-bento-hero__body {
  min-width: 0;
}

.mosaic-bento-hero__icon-tile {
  width: 5rem;
  height: 5rem;
}

.mosaic-bento-hero__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-bento-hero__lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* glossary gazette — multi-column flow (not CSS grid), brick avoid breaks, footnote icon */
.glossary-gazette__columns {
    column-count: 1;
    column-gap: 1.25rem;
}

@media (min-width: 768px) {
    .glossary-gazette__columns {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .glossary-gazette__columns {
        column-count: 3;
    }
}

.glossary-gazette__brick {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.glossary-gazette__note-ico {
    width: 3.25rem;
    height: 3.25rem;
}

.glossary-gazette__note-icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* subscribe v20 — split-screen editorial portrait: writing-mode only, no colors */
.mailing-split-collage__heading {
    writing-mode: horizontal-tb;
}

/* vertical headline only from md+, where the panel becomes a side column */
@media (min-width: 768px) {
    .mailing-split-collage__heading {
        writing-mode: vertical-rl;
    }
}