/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-max-compound-selectors */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --grid-gap-mobile: var(--size-2x);
  --grid-gap-tablet: var(--size-3x);
  --grid-gap-desktop: var(--size-5x);
}

.columns {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--grid-gap-mobile);
}

.grid:not(.columns),
.columns > div {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--grid-gap-mobile);
}

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

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

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

@media screen and (min-width: 768px) {
  /* stylelint-disable-next-line rule-empty-line-before */
  .grid:not(.columns),
  .columns > div {
    display: grid;
    gap: var(--grid-gap-tablet);
    grid-template-rows: 1fr;
  }

  .grid--columns-sm-2-equal,
  .columns.grid-columns-sm-2-equal > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--columns-sm-2-left,
  .columns.grid-columns-sm-2-left > div {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--columns-sm-2-left > div:nth-child(2n + 1),
  .columns.grid-columns-sm-2-left > div > div:nth-child(2n + 1) {
    grid-column: 1 / 3;
  }

  .grid--columns-sm-2-right,
  .columns.grid-columns-sm-2-right > div {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--columns-sm-2-right > div:nth-child(2n),
  .columns.grid-columns-sm-2-right > div > div:nth-child(2n) {
    grid-column: 2 / 4;
  }

  .grid--columns-sm-3,
  .columns.grid-columns-sm-3 > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--columns-sm-4,
  .columns.grid-columns-sm-4 > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .columns {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--grid-gap-tablet);
  }
}

@media screen and (min-width: 1280px) {
  /* stylelint-disable-next-line plugin/stylelint-bem-namics */
  .grid,
  .columns,
  .columns > div,
  .grid:not(.columns) {
    gap: var(--grid-gap-desktop);
  }

  .columns > div > div > *:first-child {
    --default-heading-margin: 0 var(--size-4x);
    --default-element-margin: 0 var(--size-4x);
  }

  .columns > div > div > *:last-child {
    --default-heading-margin: var(--size-20) 0;
    --default-element-margin: var(--size-4x) 0;
  }

  .columns > div > div > *:only-child {
    --default-heading-margin: 0;
    --default-element-margin: 0;
  }
}