:root {
  --download-box-background-color: var(--color-orange-light);

  @include use-responsive-sizing(--download-box-padding-block, responsive-map(xs 2.5rem, xl 5rem));
  @include use-responsive-sizing(--download-box-padding-inline, responsive-map(xs 2rem, xl 5rem));
  @include use-responsive-sizing(--download-box-aspect-ratio, (
    xs: 1,
    s: 1.25,
    m: 1.5,
    l: 2,
  ));
}

.download-box {
  aspect-ratio: var(--download-box-aspect-ratio);
  background-color: var(--download-box-background-color);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: var(--download-box-padding-block);
  padding-inline: var(--download-box-padding-inline);
  position: relative;
}

.download-box--cyan {
  --download-box-background-color: var(--color-cyan-light);
}

.download-box--green {
  --download-box-background-color: var(--color-green-light);
}

.download-box--yellow {
  --download-box-background-color: var(--color-yellow-light);
}

.download-box--purple {
  --download-box-background-color: var(--color-purple-light);
}

.download-box--blue {
  --download-box-background-color: var(--color-blue-light);
}

.download-box--red {
  --download-box-background-color: var(--color-red-light);
}

.download-box__headline {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.2rem, xl 4rem));
}

.download-box__text {
  line-height: var(--line-height-body);
}

.download-box__download-button {
  margin-block-start: auto;
}