.ds-slim-media-promo {
  background-color: var(--ds-color-los-angeles-90);
  color: var(--ds-color-london-5);
  padding: 0.75rem 0 1rem;
  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-slim-media-promo--inverse {
  background-color: var(--ds-color-chicago-45);
  color: var(--ds-color-london-100);
}

.ds-slim-media-promo--singapore-55 {
  background-color: var(--ds-color-singapore-55);
}

.ds-slim-media-promo--paris-90 {
  background-color: var(--ds-color-paris-90);
}

.ds-slim-media-promo--chicago-20 {
  background-color: var(--ds-color-chicago-20);
}

.ds-slim-media-promo__title {
  font-family: var(--ds-type-system-serif-lining);
  font-size: var(--ds-type-scale-4);
  font-weight: 500;
  line-height: var(--ds-type-leading-upper);
}

@media (--ds-viewport-max-medium) {
  .ds-slim-media-promo__title {
    margin: 0 0 1.5rem 0;
  }
}

@media (--ds-viewport-min-medium) {
  .ds-layout-slim-media-promo {
    align-items: center;
    .ds-link-with-arrow-icon {
      grid-column: 5 / 7;
    }
  }
  .ds-slim-media-promo__title {
    grid-column: 1 / 5;
  }
}

@media (--ds-viewport-min-large) {
  .ds-slim-media-promo {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
  }
  .ds-layout-slim-media-promo {
    .ds-link-with-arrow-icon {
      grid-column: 10 / 13;
    }
  }
  .ds-slim-media-promo__title {
    grid-column: 2 / 9;
  }
}
