.coins {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.coin_1 {
    aspect-ratio: 124 / 140;
    max-width: 326px;
}

.coin_2 {
    aspect-ratio: 92 / 104;
    max-width: 290px;
}

.coin_3 {
    aspect-ratio: 74 / 280;
    max-width: 186px;
}

.coin_4 {
    aspect-ratio: 116 / 345;
    max-width: 116px;
}

.coin_1,
.coin_2,
.coin_3,
.coin_4 {
    position: absolute;
}

@media (orientation: portrait) and (min-width: 0px) {
    .coin_1,
    .coin_2 {
    }

    .coin_1 {
        bottom: 0;
        left: 0;
        width: 124px;
        height: 140px;
        background: url('../img/coins/coin_1_mobile.webp') no-repeat center center/contain;
    }

    .coin_2 {
        top: -5%;
        left: 0;
        width: 92px;
        height: 104px;
        background: url('../img/coins/coin_2_mobile.webp') no-repeat center center/contain;
    }

    .coin_3 {
        top: 48%;
        right: -2%;
        width: 74px;
        height: 280px;
        background: url('../img/coins/coin_3_mobile.webp') no-repeat center center/contain;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    .coin_1 {
        top: 55%;
        left: 0;
        width: 250px;
        height: 282px;
        background: url('../img/coins/coin_1_tablet.webp') no-repeat center center/contain;
    }

    .coin_2 {
        top: 0;
        left: 0;
        width: 180px;
        height: 206px;
        background: url('../img/coins/coin_2_tablet.webp') no-repeat center center/contain;
    }

    .coin_3 {
        top: 50%;
        right: 2%;
        width: 132px;
        height: 504px;
        background: url('../img/coins/coin_3_mobile.webp') no-repeat center center/contain;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .coin_1 {
        bottom: 0;
        left: 2%;
        width: clamp(100px, 18vw, 324px);
        background: url('../img/coins/coin_1_desktop.webp') no-repeat center center/contain;
    }

    .coin_2 {
        top: 0;
        left: 45%;
        width: clamp(100px, 18vw, 290px);
        background: url('../img/coins/coin_2_desktop.webp') no-repeat center center/contain;
    }

    .coin_3 {
        top: 50%;
        right: 2%;
        width: clamp(40px, 7vw, 186px);
        background: url('../img/coins/coin_3_desktop.webp') no-repeat center center/contain;
    }

    .coin_4 {
        bottom: -7%;
        left: 55%;
        width: clamp(40px, 7vw, 116px);
        background: url('../img/coins/coin_3_desktop.webp') no-repeat center center/contain;
    }
}