/* ------------------------------ */
/* ------ Birthday Coin Set ----- */
/* ------------------------------ */

.coin_set {
    position: relative;
}

.coin_set::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 78%;
    background-color: var(--brand-gold);
}

.coin_set__inside {
    z-index: 5;
}

.coin_set__content p {
    margin-bottom: 0;
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1280px) {

    .coin_set__content {
        top: 55%;
    }

}


@media all and (min-width: 768px) {

    .coin_set__inside {
        z-index: 5;
        max-width: calc(1400px + var(--spacing-6) * 2);
    }

    .coin_set__image .picture_container {
        aspect-ratio: 1400 / 820;
    }

    .coin_set__content {
        position: absolute;
        max-width: 470px;
        left: 60%;
        padding-right: var(--spacing-5-5);
    }

}


@media all and (max-width: 1279.98px) and (min-width: 992px) {

    .coin_set__content {
        top: 50%;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .coin_set__inside {
        padding-bottom: var(--spacing-6);
    }

    .coin_set__image {
        position: relative;
        left: calc(-1 * var(--spacing-6));
    }

    .coin_set__content {
        top: auto;
        bottom: var(--spacing-7);    
        left: calc(60% - var(--spacing-6));
        padding-right: var(--spacing-6);
    }

}


@media all and (max-width: 767.98px) {

    .coin_set::after {
        height: 72.5%;
    }

    .coin_set__inside {
        padding-left: 0;
        padding-right: 0;
    }

    .coin_set__image .picture_container {
        aspect-ratio: 768 / 660;
    }

    .coin_set__content {
        padding: var(--spacing-2) var(--spacing-5-5) var(--spacing-5-5);
    }
    

}