.collection-promo {
  position: relative;
  grid-column: span var(--ColumnWidth_Mobile);

  @media (width > 1200px) {
    grid-column: span var(--ColumnWidth_Desktop);
  }

  &::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: var(--Overlay_Color);
  }
}

.collection-promo__content-wrapper {
  --Content_Spacing: 25px;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--Content_Spacing);
  color: var(--Content_Color);
  display: grid;
  place-content: var(--Content_Position);
  text-align: var(--Content_Alignment);

  @media (width > 1200px) {
    --Content_Spacing: 50px;
  }
}

.collection-promo--desktop-one-quarter .collection-promo__content-wrapper {
  --Content_Spacing: 10px;

  @media (width > 1200px) {
    --Content_Spacing: 25px;
  }
}

.collection-promo__content {
  width: fit-content;
}

.collection-promo__heading {
  color: inherit;
}

.collection-promo__media-wrapper {
  height: 100%;
  pointer-events: none;
}

.collection-promo__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-promo__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.collection-promo__link:not(.button) {
  text-decoration: underline;
  font-weight: 400;
  line-height: 1;
}