.bnacbr-bonus-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 2.1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "primary prizes final"
    "primary football final";
  gap: 16px;
  aspect-ratio: 4.32;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bnacbr-bonus-grid__item {
  min-width: 0;
  min-height: 0;
}

.bnacbr-bonus-grid__item--primary {
  grid-area: primary;
}

.bnacbr-bonus-grid__item--prizes {
  grid-area: prizes;
}

.bnacbr-bonus-grid__item--football {
  grid-area: football;
}

.bnacbr-bonus-grid__item--final {
  grid-area: final;
}

.bnacbr-bonus {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 12px;
  background: var(--bnacbr-color-header);
  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
}

.bnacbr-bonus img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .bnacbr-bonus-grid {
    display: flex;
    gap: 12px;
    aspect-ratio: auto;
    margin-inline: -8px;
    padding: 8px 8px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 8px;
    scrollbar-width: none;
  }

  .bnacbr-bonus-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .bnacbr-bonus-grid__item {
    flex: 0 0 min(84%, 400px);
    scroll-snap-align: start;
  }

  .bnacbr-bonus {
    height: auto;
    aspect-ratio: 909 / 529;
  }
}