.grid {
  display: grid;
  gap: var(--space-md);
  max-width: var(--l-max-width);
  min-width: 33rem;
  overflow: hidden;
  place-content: center;
  place-items: center;
}

hr {
  border-top: 0.2rem solid var(--color-border);
  height: 0.2rem;

  @media (width < 1024px) {
    margin-block: var(--space-lg);
  }

  @media (width >= 1024px) {
    margin-block: var(--space-2xl);
  }
}

.col-2,
.col-3,
.col-4,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-3-2,
.col-1-4 {

  .grid-item {
    height: 100%;
    max-width: 100%;
    width: 100%;
  }

  .swiper-slide {
    width: 100%;

    @media (width < 768px) {
      margin-right: var(--space-md);
      max-width: -moz-fit-content;
      max-width: fit-content;

      &:first-of-type {
        margin-left: var(--space-md);
      }
    }

    @media (width >= 768px) {
      height: 100%;
      max-width: 100%;
      width: 100%;

      > *:not(svg):not(img) {
        height: 100%;
        max-width: 100%;
        width: 100%;
      }
    }
  }
}

.col-1,
.col-2,
.col-3,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-3-2 {
  @media (width < 1024px) {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 33rem));
    width: 100%;
  }
}

.col-1 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.col-2 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(2, auto);
  }
}

.col-3 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .grid-item {

    & > *:not(svg) {
      height: 100%;
      max-width: 100%;
      width: 100%;
    }
  }
}

.col-4 {
  width: 100%;
  @media (width < 1280px) {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 33rem));
  }

  @media (width >= 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-item {

    & > *:not(svg) {
      height: 100%;
      max-width: 100%;
      width: 100%;
    }
  }
}

.col-6 {
  width: 100%;
  @media (width >= 1024px) {
    grid-template-columns: repeat(6, 1fr);
  }
}

.col-7 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
  }
}

.col-8 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
  }
}

.col-9 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(9, 1fr);
    width: 100%;
  }
}

.col-10 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(10, 1fr);
    width: 100%;
  }
}

.masonry {
  margin-inline: auto;

  .grid-item,
  .swiper-slide,
  .grid-gallery__item {
    margin-bottom: 1.6rem;
    max-width: 44rem;
  }
}

.col-1-4 {
  @media (width < 768px) {
    grid-template-columns: repeat(1, minmax(30rem, 33rem));
  }

  @media (width >= 768px) and (width < 1024px) {
    grid-template-columns: repeat(2, minmax(30rem, 44rem));
  }

  @media (width >= 1024px) {
    grid-template-columns: repeat(3, minmax(30rem, 44rem));
    width: 100%;
  }

  .grid-item {

    & > *:not(svg) {
      height: 100%;
      max-width: 100%;
      width: 100%;
    }
  }

  .grid-item:first-of-type,
  .swiper-slide:first-of-type,
  .grid-gallery__item:first-of-type {
    @media (width > 768px) {
      grid-row: span 2;
    }

    @media (width >= 768px) and (width < 1024px) {
      grid-column: span 2;
    }

    @media (width >= 1024px) {
      grid-column: span 1;
    }
  }
}

.col-3-2 {
  @media (width >= 1024px) {
    grid-template-columns: repeat(6, 1fr);
    width: 100%;

    .grid-item,
    .swiper-slide,
    .grid-gallery__item {

      &:nth-child(5n + 1),
      &:nth-child(5n + 2),
      &:nth-child(5n + 3) {
        grid-column: span 2;
      }

      &:nth-child(5n + 4),
      &:nth-child(5n + 5) {
        grid-column: span 3;
      }
    }

    .grid-item {

      & > *:not(svg) {
        height: 100%;
        max-width: 100%;
        width: 100%;
      }
    }
  }
}

.narrow {
  max-width: var(--l-content-width) !important;
}

.wide {
  max-width: var(--l-max-width) !important;
}

.grid-item--span-1 {
  @media (width >= 1024px) {
    grid-column: span 1;
  }
}

.grid-item--span-2 {
  @media (width >= 1024px) {
    grid-column: span 2;
  }
}

.grid-item--span-3 {
  @media (width >= 1024px) {
    grid-column: span 3;
  }
}

.grid-item--span-4 {
  @media (width >= 1024px) {
    grid-column: span 4;
  }
}

.grid-item--span-5 {
  @media (width >= 1024px) {
    grid-column: span 5;
  }
}

.grid-item--span-6 {
  @media (width >= 1024px) {
    grid-column: span 6;
  }
}

.grid-item--span-7 {
  @media (width >= 1024px) {
    grid-column: span 7;
  }
}

.grid-item--span-8 {
  @media (width >= 1024px) {
    grid-column: span 8;
  }
}

.grid-item--span-9 {
  @media (width >= 1024px) {
    grid-column: span 9;
  }
}

.grid-item--span-10 {
  @media (width >= 1024px) {
    grid-column: span 10;
  }
}