/* Block: Zwei Spalten mit Bildreihe
   ------------------------------------------------------------------
   Gemessen an .figma-ref/20.08/Beckenrandsteine_Terrassenplatten.png:
   zwei Spalten à 6/12, Überschrift und Text zentriert, darunter eine
   Bildreihe.

   Links („Für jede Poolform"): drei Umrissformen mit Abstand.
   Rechts („Unsere Farbwelt"): vier Farbkarten, 101 × 186, Abstand 12,
   die Reihe außen abgerundet – der Farbfächer.

   Tablet/Mobil sind abgeleitet: dort stehen die beiden Spalten
   untereinander.
   ------------------------------------------------------------------ */

.block-duo-columns {
    background-color: var(--color-white);
}

.duo-columns-row {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 48px;
}

.duo-column {
    text-align: center;
}

.duo-column-headline {
    margin: 0 0 var(--space-sm);
    color: var(--color-heading);
}

.duo-column-text {
    max-width: 56ch;
    margin: 0 auto var(--space-md);
    font-size: var(--fs-copy-s);
    line-height: 1.6;
    color: var(--color-text);
}

/* ── Bildreihe ──────────────────────────────────────────────── */
.duo-column-items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.duo-column-item {
    margin: 0;
}

.duo-column-img {
    display: block;
    height: auto;
}

/* ── Farbfächer ─────────────────────────────────────────────── */
.duo-column-items--fan {
    gap: 12px;
    align-items: stretch;
}

/* Nur die Außenkanten sind rund – innen stoßen die Karten stumpf
   aneinander, sonst wirkt die Reihe wie vier Einzelkacheln. */
.duo-column-items--fan .duo-column-item:first-child .duo-column-img {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.duo-column-items--fan .duo-column-item:last-child .duo-column-img {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* ── Mobil ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .duo-column-items       { gap: 16px; }
    .duo-column-items--fan  { gap: 8px; }

    /* Vier Farbkarten nebeneinander passen auf 390 px nicht mehr in
       Originalgröße – sie teilen sich die Breite. */
    .duo-column-items--fan .duo-column-item { flex: 1 1 0; }
    .duo-column-items--fan .duo-column-img  { width: 100%; }
}