.promo {
  min-height: var(--promo-min-height, 0);
}
.main-nav__promos .promo {
  padding: 0;
}
.promo::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s;
  background-color: var(--promo-overlay-color);
}
.promo .media {
  z-index: 0;
  overflow: hidden;
}
.promo .media img {
  transition: transform 0.4s cubic-bezier(0.38, 0.41, 0.27, 1);
  will-change: transform;
}

.card--promo {
  padding: calc(4 * var(--space-unit));
}

.card.card--promo .card--promo__info {
  padding: calc(4 * var(--space-unit)) 0 0;
}

.promo--border {
  border: 1px solid var(--promo-border-color);
}

.promo__content {
  z-index: 1;
  padding: var(--gutter);
}
.promo__content .rte {
  color: var(--promo-text-color);
  font-size: var(--font-size);
}
.promo__content .rte p {
  margin-bottom: 0.5em;
}
.promo__content .rte a {
  color: currentColor;
}
.promo__content .rte > *:last-child {
  margin-bottom: 0;
}
.promo__content .link {
  color: var(--promo-text-color);
}

.card--promo__content .rte a {
  color: currentColor;
}

.promo--grow {
  flex: 1;
}

.promo__mp4 {
  object-position: center;
}

.main-products-grid[data-layout=list] .promo-item--grid,
.main-products-grid[data-layout=grid] .promo-item--list {
  display: none;
}

.main-products-grid[data-layout=list] .card--promo {
  padding: calc(4 * var(--space-unit));
}
.main-products-grid[data-layout=list] .card--promo__info {
  padding-top: calc(4 * var(--space-unit));
  padding-bottom: calc(4 * var(--space-unit));
  padding-inline-start: 0;
  padding-inline-end: calc(4 * var(--space-unit));
}

@media (max-width: 768.98px) {
  .promo__content .rte {
    font-size: calc(var(--font-size) * 0.9);
  }
  .card--promo-small,
  .main-products-grid[data-layout=list] .card--promo__info {
    padding: 0;
  }
}
@media (min-width: 769px) {
  .main-products-grid[data-layout=list] .card--promo__info {
    padding-top: calc(4 * var(--space-unit));
    padding-bottom: calc(4 * var(--space-unit));
    padding-inline-start: 0;
    padding-inline-end: calc(4 * var(--space-unit));
  }
  .main-products-grid[data-layout=grid] .card--promo {
    padding: calc(4 * var(--space-unit));
  }
  .main-products-grid[data-layout=list] .card--promo .btn {
    width: max-content;
  }
  .promo__content {
    padding: max(1em, 24px) max(1.25em, 30px);
  }
  .main-nav__promos .promo__content {
    padding: 1em 1.5em;
  }
  a.promo:hover::after {
    opacity: 0.5;
  }
}