.widget-columns {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.wl-columns {
    display: grid;
    align-items: start;
}

.wl-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wl-columns--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.wl-columns--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }

.wl-columns--gap-s { gap: 1rem; }
.wl-columns--gap-m { gap: 2rem; }
.wl-columns--gap-l { gap: 3.5rem; }

.wl-columns--align-center { align-items: center; }
.wl-columns--align-stretch { align-items: stretch; }

/* Widgets in einer Spalte bringen ihren eigenen Seitenrand mit -- innerhalb
   der Spalte waere der doppelt gemoppelt und wuerde die Spalte unnoetig
   schmal machen. */
.wl-column > .widget,
.wl-column > .wl-widget-frame > .widget {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 820px) {
    .wl-columns--stack { grid-template-columns: minmax(0, 1fr) !important; }
    .wl-columns--4:not(.wl-columns--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}