/* Components :: Grid :: Styles */

:root {
  --grid-cols: 3;
  --grid-mobile-cols: 3;
  --grid-gutter: 24px;
  --grid-column-width: auto;
  --grid-template-columns: auto;
  --grid-template-rows: auto;
  --grid-rows: auto;
}

.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), var(--grid-column-width));
  grid-template-rows: var(--grid-rows);
  grid-gap: var(--grid-gutter);
  height: 100%;
}

.u-grid--custom {
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);
}

@media screen and (max-width: 767px) {
  .u-grid {
    grid-template-columns: repeat(
      var(--grid-mobile-cols),
      var(--grid-column-width)
    );
  }

  .u-grid--custom {
    grid-template-columns: var(--grid-template-columns);
    grid-template-rows: var(--grid-template-rows);
  }
}