/* ------------------------------ */
/* -------- Special coin -------- */
/* ------------------------------ */

.section__coins, .section__coins_preview {
    background-size: 100% auto;
    background-position: center top;
}

.section__teaser--coin + .section__coins, .section__teaser--coin + .section__coins_preview {
    padding-top: 0;
}

.coins_container, .coins, .coin {
    position: relative;
}

.coins {
    z-index: 5;
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
}

.coins_container + .coins_container .coins {
    padding-top: 0;
}

.coin__content {
    margin: 0 auto;
    padding-top: var(--spacing-7);
}

.coin h3, .coin p, .coin a {
    color: var(--brand-white);
}

.coin__content .button {
    margin-top: var(--spacing-4);
}

.coin__media_container {
    position: relative;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
}

.coin__media {
    aspect-ratio: 310 / 310;
    margin: 0 auto;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
  
.no-touchevents .coin__media_container:hover .coin__media, 
.touchevents .coin__media_container.is-active .coin__media {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
            transform: rotate3d(0, 1, 0, 180deg);
}
  
.coin__media__face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.coin__media__face--heads {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}

.coin__media__face--tails {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.coins_button {
    position: relative;
    z-index: 5;
    padding-bottom: var(--spacing-11);
    text-align: center;
}

.coin__status {
    position: absolute;
    top: var(--spacing-8);
    right: 0;
}

.coin__status span.meta {
    margin-top: 0;
    background-color: var(--brand-white);
    padding: 8px 14px 6px;
}



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

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

    .section__coins_preview .coins_container--button .coins {
        padding-bottom: var(--spacing-9);
    }

    .coin__media {
        max-width: 310px;
    }

    .coin__content {
        max-width: 300px;
    }  

}


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

    .coins .coin:nth-child(n+4) {
        margin-top: var(--spacing-10-5);
    }

}


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

    .coin__status span.meta {
        padding: 7px 12px 8px;
    }

}


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

    .coins .coin {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }

    .coins .coin + .coin {
        margin-top: calc(var(--spacing-5) * 2);
    }

    .section__coins_preview .coins_container--button .coins {
        padding-bottom: var(--spacing-7);
    }

    .coin__media {
        max-width: 300px;
    }

    .coin__content .button {
        margin-top: var(--spacing-2);
    }

    .coin__status span.meta {
        padding: 7px 11px 6px;
    }

}


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

    .coin__content {
        padding-top: var(--spacing-6);
    }

}