.promotion-card-container.has-1-columns, .promotion-card-container.has-2-columns {
  --column-width: calc(50% - 8px);
}
.promotion-card-container.has-3-columns, .promotion-card-container.has-5-columns, .promotion-card-container.has-6-columns, .promotion-card-container.has-7-columns, .promotion-card-container.has-8-columns {
  --column-width: calc(33.33% - 11px);
}
@media (width < 992px) {
  .promotion-card-container.has-3-columns, .promotion-card-container.has-5-columns, .promotion-card-container.has-6-columns, .promotion-card-container.has-7-columns, .promotion-card-container.has-8-columns {
    --column-width: calc(50% - 8px);
  }
}
.promotion-card-container.has-4-columns {
  --column-width: calc(25% - 12px);
}
@media (width < 1224px) {
  .promotion-card-container.has-4-columns {
    --column-width: calc(50% - 8px);
  }
}
@media (width < 760px) {
  .promotion-card-container.has-1-columns, .promotion-card-container.has-2-columns, .promotion-card-container.has-3-columns, .promotion-card-container.has-4-columns, .promotion-card-container.has-5-columns, .promotion-card-container.has-6-columns, .promotion-card-container.has-7-columns, .promotion-card-container.has-8-columns {
    --column-width: 100%;
  }
}
.promotion-card-container .experience-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}
.promotion-card-container .experience-cards .experience-hofix-promotionCard {
  width: var(--column-width);
  container-type: inline-size;
}
.promotion-card-container .experience-cards .experience-hofix-promotionCard:has(.vertical) {
  container-name: verticalPromoCard;
}
.promotion-card-container .experience-cards .experience-hofix-promotionCard:has(.horizontal) {
  container-name: horizontalPromoCard;
  width: 100%;
}