/*
  This is a basic grid system, that should be very easy to use.
  To use, simply add an element with a class of .lgd-row, then add
  another element as a direct descendant(s) of this with the widths
  you want:
   - .lgd-row__full
   - .lgd-row__three-quarters
   - .lgd-row__two-thirds
   - .lgd-row__one-half
   - .lgd-row__one-third
   - .lgd-row__one-quarter

  In some cases, this might mean adding more templates than we want, so
  we have further classes that will give the same result by adding a modifier
  class to the parent .lgd-row element (e.g. <div class="lgd-row lgd-row--halves">).
  - .lgd-row--halves - direct descendants are all 50% each
  - .lgd-row--thirds - direct descendants are all 33% each
  - .lgd-row--quarters - direct descendants are all 25% each
*/
.lgd-row {
  display: flex;
  flex-wrap: wrap;
}

.lgd-row--centered {
  justify-content: center;
}

.lgd-row--vertically-centered {
  align-items: center;
}

.lgd-row > * {
  margin-right: calc(var(--grid-column-spacing) / 2);
  margin-left: calc(var(--grid-column-spacing) / 2);
}

.lgd-row__one-quarter,
.lgd-row--quarters > *,
.lgd-row__one-third,
.lgd-row--thirds > *,
.lgd-row__one-half,
.lgd-row--halves > *,
.lgd-row__two-thirds,
.lgd-row__three-quarters,
.lgd-row__full {
  width: calc(100% - var(--grid-column-spacing));
}

@media screen and (min-width: 48rem) {
  .lgd-row__one-quarter,
  .lgd-row--quarters > *,
  .lgd-row__one-third,
  .lgd-row--thirds > *,
  .lgd-row__one-half,
  .lgd-row--halves > *,
  .lgd-row__two-thirds,
  .lgd-row__three-quarters {
    width: calc(50% - var(--grid-column-spacing));
  }
}

@media screen and (min-width: 60rem) {
  .lgd-row__one-quarter,
  .lgd-row--quarters > * {
    width: calc(25% - var(--grid-column-spacing));
  }

  .lgd-row__one-third,
  .lgd-row--thirds > * {
    width: calc((100% / 3) - var(--grid-column-spacing));
  }

  .lgd-row__two-thirds {
    width: calc((100% / 3 * 2) - var(--grid-column-spacing));
  }

  .lgd-row__three-quarters {
    width: calc(75% - var(--grid-column-spacing));
  }
}

/*
  Any view using the `view--grid` class will have:
  - 1 column on mobile
  - 2 columns on tablet and desktop
  - 3, 4, 5 columns on desktop depending on what extra class you add to the view.
  - a gap of var(--spacing) between each item, unless you add a gap class.

  Available classes:
  - view--grid-thirds
  - view--grid-quarters
  - view--grid-fifths

  As well as that, can can specify the gap with with the following classes:
  - view--grid-gap-none
  - view--grid-gap-small
  - view--grid-gap-smaller
  - view--grid-gap-smallest
  - view--grid-gap-medium - default, so no need to manually add to the view.
  - view--grid-gap-large
  - view--grid-gap-larger
  - view--grid-gap-largest
*/
.view--grid {
  --lgd-view-grid-columns: 1;
  --lgd-view-grid-gap: var(--spacing);
}

.view--grid-gap-none {
  --lgd-view-grid-gap: 0;
}
.view--grid-gap-small {
  --lgd-view-grid-gap: var(--spacing-small);
}
.view--grid-gap-smaller {
  --lgd-view-grid-gap: var(--spacing-smaller);
}
.view--grid-gap-smallest {
  --lgd-view-grid-gap: var(--spacing-smallest);
}
.view--grid-gap-medium {
  --lgd-view-grid-gap: var(--spacing);
}
.view--grid-gap-large {
  --lgd-view-grid-gap: var(--spacing-large);
}
.view--grid-gap-larger {
  --lgd-view-grid-gap: var(--spacing-larger);
}
.view--grid-gap-largest {
  --lgd-view-grid-gap: var(--spacing-largest);
}

.view--grid .view-content {
  display: grid;
  grid-template-columns: repeat(var(--lgd-view-grid-columns), 1fr);
  grid-gap: var(--lgd-view-grid-gap);
}

@media screen and (min-width: 48rem) {
  .view--grid .view-content {
    --lgd-view-grid-columns: 2;
  }
}

@media screen and (min-width: 60rem) {
  .view--grid-thirds .view-content {
    --lgd-view-grid-columns: 3;
  }
  .view--grid-quarters .view-content {
    --lgd-view-grid-columns: 4;
  }
  .view--grid-fifths .view-content {
    --lgd-view-grid-columns: 5;
  }
}