/* Column layouts on one grid (11.11.2026).
   "3 Columns", "2 Columns 60/40" and "2 Columns 40/60" share the three-column
   grid of the original stylesheet: 354px columns, at least 40px gap, spread
   over the full width. In 60/40 and 40/60 the wide column spans two of the
   three columns, so it lines up with a 3-column element above or below.
   Columns shrink below 354px when the space is narrower instead of overflowing.
   Replaces columns-40-60.css (10.11.2026). */

/* BEGIN columns-grid */
main div.c-section.c-columns-1-1-1 > .inner,
main div.c-columns.c-columns-1-1-1 > .inner,
main div.c-section.c-columns-2-1 > .inner,
main div.c-columns.c-columns-2-1 > .inner,
main div.c-section.c-columns-1-2 > .inner,
main div.c-columns.c-columns-1-2 > .inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 354px));
    grid-gap: 40px;
    justify-content: space-between;
    width: 100%;
}

/* 60/40: left column wide; 40/60: right column wide. */
main div.c-section.c-columns-2-1 > .inner .col.col-1,
main div.c-columns.c-columns-2-1 > .inner .col.col-1,
main div.c-section.c-columns-1-2 > .inner .col.col-2,
main div.c-columns.c-columns-1-2 > .inner .col.col-2 {
    grid-column: span 2;
}

@media (max-width: 1220px) {
    main div.c-section.c-columns-1-1-1 > .inner,
    main div.c-columns.c-columns-1-1-1 > .inner,
    main div.c-section.c-columns-2-1 > .inner,
    main div.c-columns.c-columns-2-1 > .inner,
    main div.c-section.c-columns-1-2 > .inner,
    main div.c-columns.c-columns-1-2 > .inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Below 1000px the 3-column element switches to two columns;
   60/40 and 40/60 keep their thirds until they stack at 768px. */
@media (max-width: 1000px) {
    main div.c-section.c-columns-1-1-1 > .inner,
    main div.c-columns.c-columns-1-1-1 > .inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    main div.c-section.c-columns-2-1 > .inner,
    main div.c-columns.c-columns-2-1 > .inner,
    main div.c-section.c-columns-1-2 > .inner,
    main div.c-columns.c-columns-1-2 > .inner {
        grid-template-columns: minmax(0, 1fr);
    }
    main div.c-section.c-columns-2-1 > .inner .col,
    main div.c-columns.c-columns-2-1 > .inner .col,
    main div.c-section.c-columns-1-2 > .inner .col,
    main div.c-columns.c-columns-1-2 > .inner .col {
        grid-column: auto;
    }
}
@media (max-width: 700px) {
    main div.c-section.c-columns-1-1-1 > .inner,
    main div.c-columns.c-columns-1-1-1 > .inner {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* END columns-grid */