.offer-box {
    container-name: offer-container;
    container-type: inline-size;

    background-color: rgba(0, 0, 0, 0.75);
    border-width: 2px;
    border-color: rgb(239, 214, 52);
    border-style: solid;
    border-radius: 6.7px;

    box-shadow: 0px 0px 5px black;

    width: min(25rem, 45vw);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#special-title {
    color: white;
    font-size: min(4rem, 10vw);
    text-wrap-mode: nowrap;
    -webkit-text-stroke-width: max(1px, 0.02rem);
    -webkit-text-stroke-color: black;
}

@container offer-container {
    .offer-box h1 {
        text-align: center;
        font-size: min(1.75rem, 10.75cqw);
        text-wrap-mode: nowrap;
    }

    .special-image {
        width: min(15rem, 65cqw);
        aspect-ratio: 1.15;
        border-radius: 6.7px;
        border-width: 2px;
        border-color:rgb(239, 214, 52);
        border-style: solid;
        box-shadow: 0px 0px 5px black;
    }
}

@media (max-aspect-ratio: 1) {
    #offer-holder {
        flex-direction: column;
        gap: 20px;
    }

    .offer-box {
        width: 87.5vw;
    }
}