/* Custom properties */

:root {
  /* Styles */
  --border-color: #e4e4e4;

  /* Layout */
  --grid-column-gap: 12px;
  --grid-column-gutter: 4px;
  --grid-column-width: 1fr;
  --grid-columns: 6;
  --grid-row-gap: 32px;
  --gutter: 16px;

  /* Spacing */
  --spacingTemplateAreaVertical: 80px;
  --spacingTemplateAreaVerticalGrid: calc(var(--spacingTemplateAreaVertical) - var(--grid-row-gap));
}

@media (min-width: 768px) {
  :root {
    /* Layout */
    --grid-column-gap: 24px;
    --grid-columns: 8;
    --gutter: 28px;
  }
}

@media (min-width: 1024px) {
  :root {
    /* Layout */
    --grid-column-gap: 24px;
    --grid-column-gutter: 8px;
    --grid-columns: 12;
    --gutter: 32px;
  }
}

@media (min-width: 1354px) {
  :root {
    /* Layout */
    --grid-column-gap: 30px;
    --grid-column-gutter: 1fr;
    --grid-column-width: 80px;
    --gutter: auto;
  }
}

/* Template area */

@supports (display: grid) {
  .templateArea {
    width: 100%;
  }
}