@import '../../styles/breakpoints/index';

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: var(--gutter);
  grid-row-gap: 64px;
  margin-bottom: calc(var(--margin) * 2);

  @media (orientation: portrait) and ($sm) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (orientation: landscape) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (orientation: landscape) and ($lg) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (orientation: landscape) and ($xl) {
    grid-template-columns: repeat(5, 1fr);
  }
}
