:host {
  display: block;
  width: 100%;
}

.product-list {
  --product-list-item-min-width: 16rem;

  display: grid;
  width: 100%;
  gap: 1.5rem;

  &--row {
    --product-list-item-min-width: 32rem;

    gap: 0;
  }

  &--adaptive {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--product-list-item-min-width)), 1fr)
    );
  }

  &--simple-vertical {
    grid-template-columns: minmax(0, 1fr);
  }

  &--single {
    grid-template-columns: minmax(0, 1fr);
  }

  &__item {
    width: 100%;
    min-width: 0;
    height: 100%;

    &--carousel {
      min-width: clamp(15rem, 30vw, 18rem);
    }

    &--carousel-row {
      min-width: clamp(18rem, 70vw, 32rem);
    }
  }
}

.product-list__paginator {
  margin-top: 1.5rem;
}
