.promotion-container {
  --icon-width: 75px;
  --icon-height: 30px;
}

.section.promotion-container {
  position: relative;
  z-index: 1;
}

.section.promotion-container .promotion-wrapper {
  margin: var(--spacing-0) auto;
}

.section.promotion-container .promotion-wrapper .promotion {
  display: flex;
  padding: var(--spacing-4);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-6);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-light-cream);
  box-shadow: var(--shadow-drop-10);
}

.section.promotion-container .promotion-wrapper .promotion img {
  width: var(--icon-width);
  height: var(--icon-height);
}

.section.promotion-container .promotion-wrapper .promotion p {
  margin: var(--spacing-0);
}

.section.promotion-container .promotion .promotion-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-3);
  align-self: stretch;
  color: var(--color-spinach);
  flex-grow: 1;
}

.promotion h2 {
  font-size: var(--heading-font-size-l);
  line-height: var(--text-h3-line-height);
}

.promotion-wrapper .promotion .promotion-content > *:where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}

.promotion-wrapper .promotion .promotion-content .promotion-title {
  font-weight: var(--text-h5-weight);
}

.promotion-wrapper .promotion .promotion-content .promotion-title:is(h2) {
  font-size: var(--heading-font-size-l);
  line-height: var(--text-h3-line-height);
}

.promotion .promotion-content .promotion-description {
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight);
  line-height: 130%;
}

.promotion .promotion-content .promotion-description a {
  text-decoration: underline;
  text-underline-offset: var(--spacing-px);
}

.section.promotion-container .promotion-cta .btn {
  box-sizing: border-box;
  min-height: var(--spacing-12);
  padding: var(--spacing-2) var(--spacing-6);
}

@media (width >= 1024px) {
  .section.promotion-container .promotion-wrapper {
    margin: var(--spacing-0) auto;
  }

  .section.promotion-container .promotion-wrapper .promotion {
    display: flex;
    padding: var(--spacing-6) var(--spacing-10);
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-5);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-light-cream);
    box-shadow: var(--shadow-drop-10);
    flex-direction: row;
    margin: auto;
  }

  .section.promotion-container .promotion-cta {
    margin-left: auto;
    text-align: center;
  }

  .promotion-wrapper .promotion .promotion-content {
    max-width: 65%;
  }
}