@charset "UTF-8";
.bonuses .wrapper { border-bottom: 0.1rem solid #E3E3E8; }
.bonuses-top, .bonuses-content { width: 100%; }
.bonuses-top--nav button { border: 0.1rem solid #0AB6C9; }
.bonuses-top--nav button.get-bonuses:hover { border-color: #010101; }
.bonuses-top--nav button.bonuses-more:hover {
    background-color: #0AB6C9;
    border-color: #0AB6C9;
}
.bonuses-more {
    color: #0AB6C9;
    background-color: transparent;
}
.bonuses-content--item {
    position: relative;
    border-radius: 1.6rem;
    background-color: #202020;
}
.bonuses-item--icon {
    position: absolute;
    object-fit: contain;
}
.bonuses-content--item span { color: #FFFFFF; }

/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) {
    .bonuses {
        margin-top: 8rem;
    }
    .bonuses .wrapper {
        gap: 4rem;
        padding-bottom: 8rem;
    }
    .bonuses-top { gap: 4rem; }
    .bonuses-top--titles {
        width: 98.3rem;
        gap: 1.6rem;
    }
    .bonuses-content--item {
        width: 75.6rem;
        height: 21.2rem;
    }
    .bonuses-content--item span.h3 { max-width: 40rem; }
    .bonuses-content--item span.large { max-width: 38rem; }
}


/* Desktop (All screens) */
@media (min-width: 1025px) {
    .bonuses-top--nav {
        width: 49.7rem;
        gap: 1.6rem;
    }
    .bonuses-top--nav button { padding: 1.4rem 3.2rem; }
    .bonuses-content { gap: 0.8rem; }
    .bonuses-content--item {
        padding: 2.4rem;
        border-radius: 1.6rem;
    }
    .bonuses-item--icon {
        top: 2.4rem;
        right: 2.4rem;
        width: 10rem;
        height: 6rem;
    }
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
    .bonuses {
        margin-top: 5.6rem;
    }
    .bonuses .wrapper {
        gap: 3.2rem;
        padding-bottom: 5.6rem;
    }
    .bonuses-top { gap: 0; }
    .bonuses-top--titles {
        width: 78.3rem;
        gap: 0.8rem;
    }
    .bonuses-content--item {
        width: 63.6rem;
        height: 19.8rem;
    }
    .bonuses-content--item span.h3 { max-width: 35rem; }
    .bonuses-content--item span.large { max-width: 28rem; }
}

/* Desktop (All screens) + Tablet */
@media (min-width: 600px) {
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
    .bonuses {
        margin-top: 5.6rem;
    }
    .bonuses .wrapper {
        gap: 2.4rem;
        padding-bottom: 5.6rem;
    }
    .bonuses-top { gap: 4rem; }
    .bonuses-top--titles {
        width: 27.2rem;
        gap: 0.8rem;
        padding-right: 2rem;
    }
    .bonuses-top--nav {
        width: 40.8rem;
        gap: 0.8rem;
    }
    .bonuses-top--nav button {
        padding: 1.1rem 2.2rem;
        font-size: 1.4rem;
    }
    .bonuses-content { gap: 0.8rem; }
    .bonuses-content--item {
        width: 35.6rem;
        height: 17.6rem;
        padding: 2.4rem;
        border-radius: 1.6rem;
    }
    .bonuses-item--icon {
        top: 2.4rem;
        right: 2.4rem;
        width: 8rem;
        height: 4.8rem;
    }
    .bonuses-content--item span.h3 { max-width: 15rem; }
    .bonuses-content--item span.large { max-width: 30rem; }
}

/* Tablet + Mobile */
@media (max-width: 1289px) {
}

/* Mobile Only */
@media (max-width: 599px) {
    .bonuses {
        margin-top: 4.8rem;
    }
    .bonuses .wrapper {
        gap: 2.4rem;
        padding-bottom: 4.8rem;
    }
    .bonuses-top {
        flex-direction: column;
        gap: 2.4rem;
    }
    .bonuses-top--titles {
        width: 100%;
        gap: 1.6rem;
        padding-right: 8.5rem;
    }
    .bonuses-top--nav {
        width: 100%;
        flex-direction: column;
        gap: 0.8rem;
    }
    .bonuses-top--nav button {
        width: 100%;
        padding: 1.1rem 2.2rem;
        font-size: 1.4rem;
    }
    .bonuses-content { gap: 0.4rem; }
    .bonuses-content--item {
        width: 100%;
        height: 16rem;
        padding: 1.6rem;
        border-radius: 0.8rem;
    }
    .bonuses-item--icon {
        top: 1.6rem;
        right: 1.6rem;
        width: 8rem;
        height: 4.8rem;
    }
    .bonuses-content--item span.h3 { max-width: 14rem; }
    .bonuses-content--item span.large { max-width: 30rem; }
}