.ds-media-promo {
  color: var(--ds-color-london-5);
  padding: 1.5rem 0;
  position: relative;
  .ds-link-with-arrow-icon {
    &::before {
      bottom: 0;
      content: '';
      display: block;
      left: 0;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      text-indent: -999em;
      top: 0;
      white-space: nowrap;
      z-index: 1;
    }
  }
}

.ds-layout-media-promo {
  margin: 0 auto;
  padding-left: var(--ds-grid-gutter);
  padding-right: var(--ds-grid-gutter);
}

.ds-media-promo--inverse {
  color: var(--ds-color-london-100);
}

.ds-media-promo--podcasts {
  background-color: var(--ds-color-tokyo-55);
}

.ds-media-promo--films {
  background-color: var(--ds-color-new-york-55);
}

.ds-media-promo--editorial {
  background-color: var(--ds-color-chicago-55);
}

.ds-media-promo__group {
  &::before {
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: block;
    margin: 0 auto 1.25rem;
  }
  .ds-media-promo--films & {
    &::before {
      background-image: url('eds://common/static/images/illustration/media-promo-films.svg');
      background-size: 6.75rem;
      height: 6rem;
      width: 6.75rem;
    }
  }
  .ds-media-promo--podcasts & {
    &::before {
      background-image: url('eds://common/static/images/illustration/media-promo-podcasts.svg');
      background-size: 7rem;
      height: 6.5625rem;
      width: 7rem;
    }
  }
  .ds-media-promo--editorial & {
    &::before {
      background-image: url('eds://common/static/images/illustration/media-promo-editorial.svg');
      background-position: calc(50% + 0.875rem) 0;
      background-size: 6.1875rem;
      height: 8.75rem;
      width: 100%;
    }
  }
}

.ds-media-promo__title {
  font-family: var(--ds-type-system-serif-lining);
  font-size: var(--ds-type-scale-5);
  font-weight: 500;
  line-height: var(--ds-type-leading-upper);
  margin: 0 0 0.25rem 0;
}

.ds-media-promo__description {
  font-family: var(--ds-type-system-serif);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  margin: 0 0 1.5rem 0;
}

@media (--ds-viewport-max-medium) {
  .ds-media-promo {
    text-align: center;
    .ds-link-with-arrow-icon {
      margin: 0 auto;
    }
  }
}

@media (--ds-viewport-min-small) {
  .ds-media-promo__group {
    .ds-media-promo--films & {
      &::before {
        background-size: 7.4375rem;
        height: 6.625rem;
        width: 7.4375rem;
      }
    }
    .ds-media-promo--podcasts & {
      &::before {
        background-size: 7.5rem;
        height: 7rem;
        width: 7.5rem;
      }
    }
  }
}

@media (--ds-viewport-min-medium) {
  .ds-media-promo {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 12.5rem;
  }
  .ds-media-promo__group {
    align-items: center;
    &::before {
      grid-area: 1 / 1 / 4 / 3;
      margin-bottom: 0;
    }
    .ds-media-promo--films & {
      &::before {
        background-size: 8.5rem;
        height: 7.625rem;
        width: 8.5rem;
      }
    }
    .ds-media-promo--podcasts & {
      &::before {
        background-size: 8.5rem;
        height: 7.9375rem;
        width: 8.5rem;
      }
    }
    .ds-media-promo--editorial & {
      &::before {
        background-position: center;
        background-size: 6.5rem;
        height: 9.25rem;
        width: 6.5rem;
      }
    }
  }
  .ds-media-promo__title,
  .ds-media-promo__description,
  .ds-link-with-arrow-icon {
    grid-area: auto / 3 / auto / -1;
  }
}

@media (--ds-viewport-min-large) {
  .ds-media-promo__group {
    &::before {
      grid-column: 2 / 5;
    }
  }
  .ds-media-promo__title,
  .ds-media-promo__description,
  .ds-link-with-arrow-icon {
    grid-column: 5 / 11;
  }
}

@media (--ds-viewport-min-xlarge) {
  .ds-media-promo__group {
    &::before {
      grid-column: 4 / 6;
    }
  }
  .ds-media-promo__title,
  .ds-media-promo__description,
  .ds-link-with-arrow-icon {
    grid-column: 6 / 10;
  }
}