.boke,
.boke-desktop,
.boke-portrait {
    position: absolute;
    z-index: 1;
}

@media (orientation: portrait) and (min-width: 0px) {
    .boke-desktop {
        display: none;
    }

    .boke {
        width: 100%;
        height: 80vh;
        bottom: 0;
        background: url("../../img/boke/boke_mobile.webp") center/cover no-repeat;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    .boke {
        background: url("../../img/boke/boke_tablet.webp") center/cover no-repeat;
    }

    .boke-portrait {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        transform-origin: center;
        transform: rotate(180deg);
        background: url("../../img/boke/boke_tablet.webp") center/cover no-repeat;
    }
}

@media (orientation: portrait) and (min-width: 1280px) and (min-height: 800px) {
    .boke {
        background: url("../../img/boke/boke_laptop.webp") center/cover no-repeat;
    }

    .boke-portrait {
        background: url("../../img/boke/boke_laptop.webp") center/cover no-repeat;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .boke-portrait {
        display: none;
    }

    .boke {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
    }

    .boke-desktop {
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
    }

    .boke:before,
    .boke:after {
        content: '';
        position: absolute;
        left: 0;
        width: 50%;
        height: 100%;
    }

    .boke:after {
        top: 0;
        transform-origin: left top;
        transform: rotate(90deg) translateY(-100%);
        background: url("../../img/boke/boke_desktop.webp") center/cover no-repeat;
    }

    .boke:before {
        bottom: 0;
        width: 50%;
        height: 100%;
        background: url("../../img/boke/boke_desktop.webp") center/cover no-repeat;
    }

    .boke-desktop {
        bottom: 0;
        width: 50%;
        height: 100%;
        transform-origin: right bottom;
        transform: rotate(-90deg) translateX(100%);
        background: url("../../img/boke/boke_desktop.webp") center/cover no-repeat;
    }
}