/*  Reference: https://css-tricks.com/snippets/css/complete-guide-grid/ */

.content-container {
  display: inline-block;
  width: var(--container-width);
  padding: var(--container-padding) 0px;
  margin-left: calc( calc( 100% - var(--container-width)) / 2 );
  margin-right: calc( calc( 100% - var(--container-width)) / 2 );
}

.content-container.slim-container {
  padding: var(--container-padding-narrow) 0px;
}

.content-row {
  display: grid;
  padding-left: var(--gutter-width, 15);
  padding-right: var(--gutter-width, 15);
  /* grid-template-columns: repeat(var(--max-columns), 1fr); */
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); /* MAGIC */
  grid-template-rows: auto;
  --grid-gutter: var(--gutter-width);
  --grid-gutter-buffer: calc(var(--grid-gutter) / 2);
  grid-column-gap: var(--grid-gutter);
  column-gap: var(--grid-gutter);
  grid-row-gap: calc(var(--grid-gutter) * 2);
  row-gap: calc(var(--grid-gutter) * 2);
  margin-bottom: 60px;
}

.content-row:last-child {
  margin-bottom: 0px;
}

.content-row > * {
  align-self: start;
  justify-self: start;
}

.align-self-centered {
  align-self: center;
}

.justify-self-centered {
  justify-self: center;
}

.content-row.double-wide {
  --grid-gutter: calc(var(--gutter-width) * 2);
}

.content-row.triple-wide {
  --grid-gutter: calc(var(--gutter-width) * 3);
}

.content-row.one-hundred,
.content-row.one-column {
  grid-template-columns: 1fr;
}

.content-row.two-columns {
  grid-template-columns: 1fr 1fr;
}

.content-row.three-columns {
  grid-template-columns: 1fr 1fr 1fr;
}

.content-row.four-columns {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.content-row.five-columns {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.content-row.six-columns {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.content-row.seven-columns {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.content-row.eight-columns {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.twenty-eighty,
.twenty-eighty.flip-flop:nth-child(odd),
.twenty-eighty.flop-flip:nth-child(even),
.eighty-twenty.flip-flop:nth-child(even),
.eighty-twenty.flop-flip:nth-child(odd) {
  grid-template-columns:
    calc(20% - var(--grid-gutter-buffer))
    calc(80% - var(--grid-gutter-buffer));
}

.thirty-seventy,
.thirty-seventy.flip-flop:nth-child(odd),
.thirty-seventy.flop-flip:nth-child(even),
.seventy-thirty.flip-flop:nth-child(even),
.seventy-thirty.flop-flip:nth-child(odd) {
  grid-template-columns:
    calc(30% - var(--grid-gutter-buffer))
    calc(70% - var(--grid-gutter-buffer));
}

.forty-sixty,
.forty-sixty.flip-flop:nth-child(odd),
.forty-sixty.flop-flip:nth-child(even),
.sixty-forty.flip-flop:nth-child(even),
.sixty-forty.flop-flip:nth-child(odd) {
  grid-template-columns:
    minmax(280px, calc(40% - var(--grid-gutter-buffer)))
    minmax(280px, calc(60% - var(--grid-gutter-buffer)));
}

.fortyfive-fiftyfive,
.fortyfive-fiftyfive.flip-flop:nth-child(odd),
.fortyfive-fiftyfive.flop-flip:nth-child(even),
.fiftyfive-fortyfive.flip-flop:nth-child(even),
.fiftyfive-fortyfive.flop-flip:nth-child(odd) {
  grid-template-columns:
    minmax(280px, calc(45% - var(--grid-gutter-buffer)))
    minmax(280px, calc(55% - var(--grid-gutter-buffer)));
}

.fifty-fifty {
  grid-template-columns:
    minmax(280px, calc(50% - var(--grid-gutter-buffer)))
    minmax(280px, calc(50% - var(--grid-gutter-buffer)));
}

.fiftyfive-fortyfive,
.fiftyfive-fortyfive.flip-flop:nth-child(odd),
.fiftyfive-fortyfive.flop-flip:nth-child(even),
.fortyfive-fiftyfive.flip-flop:nth-child(even),
.fortyfive-fiftyfive.flop-flip:nth-child(odd) {
  grid-template-columns:
    minmax(280px, calc(55% - var(--grid-gutter-buffer)))
    minmax(280px, calc(45% - var(--grid-gutter-buffer)));
}

.sixty-forty,
.sixty-forty.flip-flop:nth-child(odd),
.sixty-forty.flop-flip:nth-child(even),
.forty-sixty.flip-flop:nth-child(even),
.forty-sixty.flop-flip:nth-child(odd) {
  grid-template-columns:
    minmax(280px, calc(60% - var(--grid-gutter-buffer)))
    minmax(280px, calc(40% - var(--grid-gutter-buffer)));
}

.seventy-thirty,
.seventy-thirty.flip-flop:nth-child(odd),
.seventy-thirty.flop-flip:nth-child(even),
.thirty-seventy.flip-flop:nth-child(even),
.thirty-seventy.flop-flip:nth-child(odd) {
  grid-template-columns:
    calc(70% - var(--grid-gutter-buffer))
    calc(30% - var(--grid-gutter-buffer));
}

.eighty-twenty,
.eighty-twenty.flip-flop:nth-child(odd),
.eighty-twenty.flop-flip:nth-child(even),
.twenty-eighty.flip-flop:nth-child(even),
.twenty-eighty.flop-flip:nth-child(odd) {
  grid-template-columns:
    calc(80% - var(--grid-gutter-buffer))
    calc(20% - var(--grid-gutter-buffer));
}

.content-row.flip-flop {
  margin-top: var(--container-padding);
}

.content-row.flip-flop > *,
.content-row.flop-flip > * {
  align-self: center;
  justify-self: start;
}

.content-row.flip-flop.align-self-start > *,
.content-row.flop-flip.align-self-start > * {
  align-self: start;
}

.content-row.flip-flop:first-of-type,
.content-row.flop-flip:first-of-type {
  margin-top: 0px;
}

.content-row.flip-flop:nth-child(odd),
.content-row.flop-flip:nth-child(even) {
  grid-template-areas: "content illustration"
}

.content-row.flip-flop:nth-child(even),
.content-row.flop-flip:nth-child(odd) {
  grid-template-areas: "illustration content"
}

.content-row.flip-flop .content,
.content-row.flop-flip .content {
  grid-area: content;
}

.content-row.flip-flop .illustration,
.content-row.flop-flip .illustration {
  grid-area: illustration;
}

.content-section > .content-row {
  padding: var(--container-padding);
}

.content-section.theme-light-color-scheme + .content-section.theme-light-color-scheme > .content-container,
.content-section.theme-gray-color-scheme + .content-section.theme-gray-color-scheme:not(.resource-hero):not(#hero) > .content-container,
.content-section.theme-dark-color-scheme + .content-section.theme-dark-color-scheme > .content-container,
.content-section.theme-green-color-scheme + .content-section.theme-green-color-scheme > .content-container {
  padding-top: 0;
  margin-top: -30px;
}

/* duplicate ruleset */
/*
.content-section.theme-light-color-scheme + .content-section.theme-light-color-scheme > .content-container,
.content-section.theme-gray-color-scheme + .content-section.theme-gray-color-scheme:not(.resource-hero) > .content-container,
.content-section.theme-dark-color-scheme + .content-section.theme-dark-color-scheme > .content-container,
.content-section.theme-green-color-scheme + .content-section.theme-green-color-scheme > .content-container {
  padding-top: 0;
  margin-top: -30px;
}
*/

.content-section.theme-light-color-scheme + .content-section.theme-light-color-scheme + .content-section.theme-light-color-scheme > .content-container,
.content-section.theme-gray-color-scheme + .content-section.theme-gray-color-scheme + .content-section.theme-gray-color-scheme > .content-container,
.content-section.theme-dark-color-scheme + .content-section.theme-dark-color-scheme + .content-section.theme-dark-color-scheme > .content-container,
.content-section.theme-green-color-scheme + .content-section.theme-green-color-scheme + .content-section.theme-green-color-scheme > .content-container {
  padding-top: inherit;
  margin-top: inherit;
}

.content-row.one-column.no-margin + .content-row.two-columns {
  margin-top: 0;
}