.promo {
  align-items: center;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--Medium, 8px);
  display: flex;
  flex: 1 0 320px;
  flex-direction: column;
  gap: var(--Spacing-x2);
  height: 320px;
  justify-content: center;
  padding: var(--Spacing-x4) var(--Spacing-x3);
}

.promo:nth-of-type(1) {
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.36) 37.88%,
    rgba(0, 0, 0, 0.75) 100%
  );
  /* , url(""); uncomment and add image once we have it  */
}

.promo:nth-of-type(2) {
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.36) 37.88%,
    rgba(0, 0, 0, 0.75) 100%
  );
  /* , url(""); uncomment and add image once we have it  */
}

.text {
  max-width: 400px;
}