.promo-box {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-rows: 2fr 2fr 2fr 2fr;
    grid-auto-flow: row;
    grid-template-areas:
        "promo-1 promo-2 promo-2 promo-2"
        "promo-1 promo-3 promo-3 promo-3"
        "promo-6 promo-3 promo-3 promo-3"
        "promo-5 promo-5 promo-4 promo-4";
    width: 90%;
    max-width: clamp(100px, 90%, 1000px);
}

.promo {
    background-color: #454545;
    user-select: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 75px;
    min-width: 120px;
    font-size: 14px;

    /*box-shadow: inset 0px 0px 0px 125px rgba(18, 18, 18, 0.5);*/
    /*border: solid 3px #ececec;*/
    &:hover {
        scale: 1.05;
    }

    span {
        display: none;
    }

    img, video {
        max-width: 100%;
        max-height: 100%;
    }
}

#promo-1 {
    grid-area: promo-1;
    background-color: blueviolet;
    background-image: url('/assets/imgs/promotion/batermen-preview.webp');
    background-position: center center;
    background-size: contain;
}

#promo-2 {
    grid-area: promo-2;
    background-color: seagreen;
}

#promo-3 {
    grid-area: promo-3;
    background-color: crimson;
}

#promo-4 {
    grid-area: promo-4;
    background-color: chocolate;
}

#promo-5 {
    grid-area: promo-5;
    background-color: darkgoldenrod;
}

#promo-6 {
    grid-area: promo-6;
    background-color: dodgerblue;
}