.promotion-card {
  --image-ratio: 2/1;
  --content-padding: 48px;
  --button-spacing: 40px;
  --headline-size: 40px;
  --text-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-grey-20);
}
@container verticalPromoCard (width <= 500px) {
  .promotion-card {
    --content-padding: 40px;
    --button-spacing: 32px;
    --headline-size: 28px;
    --text-size: 16px;
  }
}
@container verticalPromoCard (width <= 400px) {
  .promotion-card {
    --content-padding: 32px;
    --button-spacing: 24px;
    --headline-size: 24px;
    --text-size: 14px;
  }
}
@container verticalPromoCard (width <= 300px) {
  .promotion-card {
    --content-padding: 16px;
    --button-spacing: 16px;
  }
}
@container horizontalPromoCard (width <= 800px) {
  .promotion-card {
    --content-padding: 40px;
    --button-spacing: 32px;
    --headline-size: 34px;
  }
}
@container horizontalPromoCard (width <= 640px) {
  .promotion-card {
    --content-padding: 32px;
    --button-spacing: 24px;
    --headline-size: 28px;
    --text-size: 16px;
  }
}
@container horizontalPromoCard (width <= 550px) {
  .promotion-card {
    --content-padding: 40px;
    --button-spacing: 32px;
  }
}
@container horizontalPromoCard (width <= 400px) {
  .promotion-card {
    --content-padding: 32px;
    --button-spacing: 24px;
    --headline-size: 24px;
    --text-size: 14px;
  }
}
@container horizontalPromoCard (width <= 300px) {
  .promotion-card {
    --content-padding: 16px;
    --button-spacing: 16px;
  }
}
.promotion-card.vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.promotion-card.horizontal {
  --image-ratio: 4/3;
}
@media (width >= 552px) {
  .promotion-card.horizontal > * {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media (width < 552px) {
  .promotion-card.horizontal {
    --image-ratio: 2/1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.promotion-card.horizontal .card-picture img {
  height: 100%;
}
@media (width >= 552px) {
  .promotion-card.horizontal.image-right .card-picture {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.promotion-card .card-picture img {
  display: block;
  width: 100%;
  aspect-ratio: var(--image-ratio);
}
.promotion-card .card-content {
  padding: var(--content-padding);
  place-content: center;
  text-align: center;
}
.promotion-card .card-content .headline {
  font-family: var(--font-bold);
  font-size: var(--headline-size);
  text-align: center;
  line-height: 1.2;
}
.promotion-card .card-content .headline:has(+ .text) {
  margin-bottom: 8px;
}
.promotion-card .card-content .text {
  font-size: var(--text-size);
  line-height: 1.5;
  margin: 0;
}
.promotion-card .card-content .card-button {
  margin-top: var(--button-spacing);
}