.collections__wrapper {
  --item-align-items: var(--align-items);
  --item-description-padding: var(--description-padding);
  --item-filling-function: auto-fill;
  --item-justify-content: var(--justify-content);
  --item-min-height: 250px;
  --item-min-width: 280px;
  --item-padding-md: 32px;
  --item-text-align: var(--text-align);
  --items-gap: var(--grid-gap-mobile);

  color: var(--color-primary);
  background: var(--background-primary);
  font-size: var(--font-size-large);
}

.collections__wrapper .collections__inner {
  --item-align-items: center;
  --item-description-padding: center;
  --item-justify-content: center;
  --item-text-align: center;
}

.collections__wrapper--padding-top {
  padding-top: var(--padding-top-mobile);
}

.collections__wrapper--padding-bottom {
  padding-bottom: var(--padding-bottom-mobile);
}

.collections__list {
  display: grid;
  grid-template-columns: repeat(var(--item-filling-function), minmax(var(--item-min-width), 1fr));
  gap: var(--items-gap);
}

.collections__list:has(.collection__item:nth-child(2)) {
  --item-filling-function: auto-fit;
}

.collections__list:has(.collection__item:nth-child(5)) {
  --item-filling-function: auto-fill;
}

.collection__item {
  height: 100%;
  min-height: var(--item-min-height);
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-block);
}

.collection__content {
  padding: var(--item-padding-md);
  z-index: 2;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.collection__text-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: var(--item-align-items);
  justify-content: var(--item-justify-content);
  text-align: var(--item-text-align);
}

.collection__image-wrapper {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.collection__image {
  display: block;
  max-width: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--object-fit);
}

.collection__buttons {
  margin-bottom: calc(-1 * var(--button-margin-bottom));
}

.collection__badge {
  align-self: flex-start;
  flex: 0 0 auto;
  display: block;
  padding: 4px 8px;
  margin-bottom: 24px;
  color: var(--badge-color);
  background: var(--badge-background);
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-spacing-xs);
  border-radius: var(--border-radius-badge);
}

.collection__description {
  padding-bottom: var(--item-description-padding);
}

.collection__heading {
  line-height: var(--font-height-sm);
  margin-bottom: 4px;
}

.collection__heading + .collection__buttons {
  padding-top: 10px;
}

.collections__wrapper:has(.collections__inner) .collections__container {
  --max-width: 1780px;
}

.collections__wrapper--with-border .collection__item {
  border: 1px solid var(--color-border);
}

.collections__wrapper--with-overlay .collection__image-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: var(--opacity-overlay);
  background: linear-gradient(180deg, var(--background-overlay) 0%, var(--background-overlay-00) 100%);
}

.collections__wrapper--with-overlay .collection__heading,
.collections__wrapper--with-overlay .collection__description {
  color: var(--color-overlay);
}

@media (min-width: 768px) {
  .collections__wrapper {
    --item-min-width: 320px;
  }
}

@media (min-width: 992px) {
  .collections__wrapper {
    --item-min-height: 320px;
    --item-min-width: 320px;
  }

  .collections__wrapper--padding-top {
    padding-top: var(--padding-top);
  }

  .collections__wrapper--padding-bottom {
    padding-bottom: var(--padding-bottom);
  }
}

@media (min-width: 1200px) {
  .collections__wrapper {
    --items-gap: var(--grid-gap);
  }

  .collections__list {
    grid-template-columns: repeat(var(--grid-element), minmax(var(--grid-item-min-width), 1fr));
  }
}