.gift-left,
.gift-right {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: opacity;
}

@media (orientation: portrait) and (min-width: 0px) {
    .gift-left,
    .gift-right {
        bottom: 0;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            animation: fadeInOut 5s ease-in-out infinite;
            -webkit-animation: fadeInOut 5s ease-in-out infinite;
            will-change: opacity;
        }
    }

    .gift-left {
        left: -50%;
        background: url('../img/gift/gift_left_mobile.webp') no-repeat center center/contain;

        &::before {
            background: url('../img/gift/gift_left_active_mobile.webp') no-repeat center/contain;
        }
    }

    .gift-right {
        right: -50%;
        background: url('../img/gift/gift_right_mobile.webp') no-repeat center center/contain;

        &::before {
            background: url('../img/gift/gift_right_active_mobile.webp') no-repeat center/contain;
        }
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    .gift-left {
        left: -70%;
        bottom: -5%;
        background: url('../img/gift/gift_left_tablet.webp') no-repeat center/contain;

        &::before {
            background: url('../img/gift/gift_left_active_tablet.webp') no-repeat center/contain;
        }
    }

    .gift-right {
        right: -70%;
        bottom: -5%;
        background: url('../img/gift/gift_right_tablet.webp') no-repeat center/contain;

        &::before {
            background: url('../img/gift/gift_right_active_tablet.webp') no-repeat center/contain;
        }
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .gift-left,
    .gift-right {
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            animation: fadeInOut 5s ease-in-out infinite;
            -webkit-animation: fadeInOut 5s ease-in-out infinite;
            will-change: opacity;
        }
    }

    .gift-left {
        left: -40%;
        bottom: -15%;
        background: url('../img/gift/gift_left_desktop.webp') no-repeat center center/contain;

        &::before {
            background: url('../img/gift/gift_left_active_desktop.webp') no-repeat center/contain;
        }
    }

    .gift-right {
        right: -45%;
        bottom: -5%;
        background: url('../img/gift/gift_right_desktop.webp') no-repeat center center/contain;

        &::before {
            background: url('../img/gift/gift_right_active_desktop.webp') no-repeat center/contain;
        }
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        -webkit-opacity: 0;
    }
    30% {
        opacity: 1;
        -webkit-opacity: 1;
    }
    70% {
        opacity: 1;
        -webkit-opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-opacity: 0;
    }
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        -webkit-opacity: 0;
    }
    30% {
        opacity: 1;
        -webkit-opacity: 1;
    }
    70% {
        opacity: 1;
        -webkit-opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-opacity: 0;
    }
}