.modal {z-index: 9999999;}
.promo-modal .modal-dialog {max-width: 1600px;}
.promo-modal .modal-content {background: transparent; border: 0; border-radius: 0;}
.promo-modal .modal-body {padding: 0;}
.promo-grid {display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: nowrap;}
.promo-item {flex: 0 0 500px; width: 500px; height: 500px; display: block; overflow: hidden; background: #fff;}
.promo-item img {width: 100%; height: 100%; display: block; object-fit: cover;}

.promo-footer {display: flex; justify-content: center; align-items: center; gap: 16px; border: none;}
.promo-check {display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: var(--brand-color); color: #fff; transition: .3s ease;}
.promo-check input {appearance: none; width: 16px; height: 16px; border: 1px solid #fff;  position: relative;}
.promo-check input:checked::after {content: "\eb7b"; font-family: "remixicon"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #000; background: #fff;}

.promo-btn {background: var(--brand-color); color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; text-align: center; border: 0; border-radius: 999px; padding: 10px 25px; transition: .3s ease;}
.promo-check:hover, .promo-btn:hover {background: #2c180a}

.modal.modal-static .modal-dialog {transform: none;}
.modal.modal-static .modal-content {box-shadow: none;}

@media (max-width:768px) {
  .promo-grid {overflow-x: auto; padding: 0 16px;}
  .promo-item {flex: 0 0 320px; width: 320px; height: 320px;}
  .promo-modal .modal-footer {padding: 16px 16px 0;}
  .promo-btn {width: auto; min-width: 100px;}}