/**
 * DWN layout styles
 * Only allow for 1, 1+1, 1+1+1, 2+1, 1+2
 */

.layout-columns {
  --column-min-size: 240px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-min-size), 1fr)); /* Equal columns */

  /* ??? Non-wrapping alternative
    grid-auto-columns: minmax(200px, 1fr);
    grid-auto-flow: column;
  */

  justify-content: space-between;
  gap: 2rem clamp(2rem, 4.75vw, 4rem);
  margin-trim: block-end;
}

.layout-columns > *,
.layout-columns > * > *:last-child,
.layout-columns > * > *:last-child > *:last-child,
.layout-columns > * > *:last-child > *:last-child > *:last-child,
.layout-columns > * > *:last-child > *:last-child > *:last-child > *:last-child {
  margin-block-end: 0; /* Trim bottom margin */
}

/* 2+1 and 1+2 columns */
.layout-columns-2-1 {
  grid-template-columns: 2fr 1fr;
}
.layout-columns-1-2 {
  grid-template-columns: 1fr 2fr;
}

@media screen and (max-width: 768px) {
  .layout-columns-2-1,
  .layout-columns-1-2 {
    grid-template-columns: 1fr;
  }
}

/* Background image */
img.section-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  block-size: 100%;
  inline-size: 100%;
  opacity: 0.1;
  pointer-events: none;
  object-fit: cover;
}

/* Stack content above background */
section:has(img.section-background) > :is(header, div, footer) {
  position: relative;
  z-index: 1;
}