.collection-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;

  .collection-list__item {
    flex-basis: calc((100% - (1 * 1rem)) / 2);
    min-width: 0;
    margin-bottom: 2rem;

    @media (min-width: 990px) {
      flex-basis: calc((100% - (3 * 1rem)) / 4);
      margin-bottom: 0;
    }
    
    a {
      text-decoration: none;

      .collection-list__item__card {
        aspect-ratio: 0.75;
        overflow: hidden;
        border-radius: 1rem;

        img {
          object-fit: cover;
          height: 100%;
          width: 100%;
          transition: transform 0.2s ease;
        }
      }

      .collection-list__item__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        h4, h5 {
          margin: 1rem 0 0.5rem 0;
          color: rgba(var(--color-foreground), 0.75);
        }

        svg {
          transition: transform 0.2s ease;

          path {
             fill: rgba(var(--color-foreground));
          }
        }

        p {
          margin: 0;
          color: rgba(var(--color-foreground));
        }
      }
    }

    a:hover {
      img {
        transform: scale(1.05);
      }

      .collection-list__item__meta svg {
        transform: translateX(4px);
      }
    }
  }
}

.collection-list-title {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .collection-list:not(.slider) {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .collection-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.collection-list__item:only-child {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .slider.collection-list--1-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider.collection-list--1-items,
  .slider.collection-list--2-items,
  .slider.collection-list--3-items,
  .slider.collection-list--4-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection-list__item a:hover {
    box-shadow: none;
  }
}

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

.collection-list-view-all {
  margin-top: 2rem;
}