/* Two independent content stacks; single column below the desktop breakpoint. */
.tm-columns {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--tm-columns-gap, 2rem);
    container-type: inline-size;
}

.tm-columns-gap-small { --tm-columns-gap: 1rem; }
.tm-columns-gap-normal { --tm-columns-gap: 2rem; }
.tm-columns-gap-large { --tm-columns-gap: 3rem; }
.tm-columns-center { align-items: center; }

/* Shared surface for both columns. Plain layouts keep their original spacing. */
.tm-columns-surface {
    padding: clamp(1.5rem, 3vw, 2rem);
}

.tm-columns-bg-white { background-color: #fff; }
.tm-columns-bg-green { background-color: #e6f2ee; }
.tm-columns-bg-gray { background-color: #eef2f0; }
.tm-columns-rounded-small { border-radius: 1rem; }
.tm-columns-rounded-large { border-radius: 1.5rem; }
.tm-columns-border { border: 1px solid #c2ded4; }

.tm-columns-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.tm-columns-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Existing blocks keep their typography, but fit the width of their column. */
.tm-columns-item > * {
    max-width: 100%;
    margin-block: 0;
}

.tm-columns-item img,
.tm-columns-item video,
.tm-columns-item iframe {
    max-width: 100%;
}

/* Large headlines should respond to the content width, including in sidebars. */
.tm-columns .tm-headline-title-main {
    font-size: clamp(2.25rem, 5cqi, 3.75rem);
}

@media (max-width: 63.999rem) {
    .tm-columns-right-first > .tm-columns-right { order: -1; }
}

@media (min-width: 64rem) {
    .tm-columns-50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm-columns-40-60 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .tm-columns-60-40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}