/**
 * @file
 * CSS definitions for layout and grid utilities.
 */

.layout-area {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--width-content-max);
}

.layout-area--sm {
  max-width: var(--width-sm);
}

.layout-area--md {
  max-width: var(--width-md);
}

.layout-area--lg {
  max-width: var(--width-lg);
}

.layout-area--xl {
  max-width: var(--width-xl);
}

.layout-area--xxl {
  max-width: var(--width-xxl);
}

.layout-area--xxxl {
  max-width: var(--width-xxxl);
}

.layout-area--xxxxl {
  max-width: var(--width-xxxxl);
}

.layout-area--full {
  max-width: var(--width-full);
}

.layout-area--full-screen {
  max-width: var(--width-xxxl);
}

.layout-area--left {
  margin-left: 0;
  margin-right: auto;
}

.layout-area--right {
  margin-left: auto;
  margin-right: 0;
}

/* Margin */
.margin-bottom {
  margin-bottom: var(--spacing-md);
}

/* Grid Container */
.grid,
.view--grid .view-content {
  display: grid;
  gap: var(--grid-gap-base);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.grid--gap-none {
  gap: var(--grid-gap-none);
}

.grid--gap-small {
  gap: var(--grid-gap-sm);
}

.grid--gap-large {
  gap: var(--grid-gap-lg);
}

.grid--centered {
  align-items: center;
  justify-items: center;
}

/* Grid Columns */
.grid-item--one-quarter,
.grid-item--one-third,
.grid-item--one-half,
.grid-item--two-thirds,
.grid-item--three-quarters,
.grid--quarters>*,
.view--grid-quarters .views-row,
.grid--thirds>*,
.view--grid-thirds .views-row,
.grid--halves>*,
.view--grid-halves .views-row,
.grid--full>*,
.view--grid-full .views-row,
.grid-item--full {
  grid-column: span var(--grid-columns);
}

@media screen and (min-width: 768px) {
  .grid--quarters>*,
  .view--grid-quarters .views-row,
  .grid--thirds>*,
  .view--grid-thirds .views-row,
  .grid--halves>*,
  .view--grid-halves .views-row {
    grid-column: span calc(var(--grid-columns) / 2);
  }

  .grid-item--one-quarter {
    grid-column: span calc(var(--grid-columns) / 4);
  }

  .grid-item--one-third {
    grid-column: span calc(var(--grid-columns) / 3);
  }

  .grid-item--one-half {
    grid-column: span calc(var(--grid-columns) / 2);
  }

  .grid-item--two-thirds {
    grid-column: span calc(var(--grid-columns) / 3 * 2);
  }

  .grid-item--three-quarters {
    grid-column: span calc(var(--grid-columns) / 4 * 3);
  }
}

@media screen and (min-width: 1180px) {
  .grid--quarters>*,
  .view--grid-quarters .views-row {
    grid-column: span calc(var(--grid-columns) / 4);
  }

  .grid--thirds>*,
  .view--grid-thirds .views-row {
    grid-column: span calc(var(--grid-columns) / 3);
  }

  .grid--halves>*,
  .view--grid-halves .views-row {
    grid-column: span calc(var(--grid-columns) / 2);
  }
}

/* Padding */
.padding {
  padding: var(--spacing-md);
}

.layout-area--padding-x-md {
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
}

.layout-area--padding-y-md {
  padding-block: var(--spacing-md);
}

.layout-area--padding-y-xl {
  padding-block: var(--spacing-xl);
}