H2:has(+ UL.u27-topic-teaser)
{
    MARGIN-BOTTOM: var(--cms-vpadding);
}

H2:has(+ UL.u27-topic-teaser) BUTTON
{
    ALL: unset;
    CURSOR: pointer;
    DISPLAY: inline-block;
}

H2:has(+ UL.u27-topic-teaser) BUTTON:is(:focus-visible, :hover)
{
    COLOR: var(--cms-link-color-alt);
    TEXT-DECORATION: underline;
}

UL.u27-topic-teaser
{
    CONTAIN: content;
    DISPLAY: flex;
    GAP: var(--cms-hpadding);
    LIST-STYLE: none;
    MARGIN: 0 0 var(--cms-hpadding);
    OVERFLOW-X: auto;
    SCROLL-SNAP-TYPE: x mandatory;
}

UL.u27-topic-teaser > LI
{
    CONTAIN: content;
    DISPLAY: flex;
    FLEX: 0 0 calc(100% / 3 - var(--cms-hpadding) / 3 * 2);
    MARGIN: 0;
    MIN-WIDTH: min(100%, 250 * var(--cms-factor));
    SCROLL-SNAP-ALIGN: start;
}

UL.u27-topic-teaser > LI:before
{
    DISPLAY: none;
}

UL.u27-topic-teaser > LI > A
{
    ALIGN-ITEMS: center;
    BORDER: var(--tpl-border);
    BOX-SIZING: border-box;
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: var(--cms-hpadding);
    PADDING: var(--cms-hpadding);
    TEXT-DECORATION: none;
}

UL.u27-topic-teaser > LI > A > IMG
{
    FLEX: 1 1 calc(75 * var(--cms-factor));
    MIN-WIDTH: min(100%, 75 * var(--cms-factor));
}

UL.u27-topic-teaser > LI > A > DIV
{
    FLEX: 1 1 calc(175 * var(--cms-factor));
    MIN-WIDTH: min(100%, 175 * var(--cms-factor));
}

UL.u27-topic-teaser > LI > A > DIV > H3
{
    MARGIN-BOTTOM: var(--cms-vpadding);
}