.video-showcase-section {
    min-height: 600px;
    overflow: hidden;
    padding: 30px 0 80px
}

.video-showcase-container,
.video-showcase-section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-showcase-container {
    max-width: 1600px;
    height: 100% z-index: 3;
}

.video-blue-container {
    position: relative;
    width: 87vw;
    max-width: 1420px;
    aspect-ratio: 1420/755;
    border-radius: 8px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 0 0 30px hsla(0, 0%, 100%, .1)
}

.showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    transition: transform .2s ease z-index: 2;
}

.showcase-video::-webkit-media-controls {
    opacity: .7;
    transition: opacity .3s ease
}

.showcase-video:hover::-webkit-media-controls {
    opacity: 1
}

.showcase-ground,
.showcase-island-2,
.showcase-island-3 {
    position: absolute;
    object-fit: cover;
    pointer-events: none
}

.showcase-island-3 {
    bottom: 30%;
    right: -120px;
    width: 300px;
    z-index: 1
        /* height: 200px */
}

.showcase-island-2,
.showcase-island-3 {
    transform: translateY(0);
    transition: transform .1s ease-out;
    will-change: transform
}

.showcase-island-2 {
    bottom: 0;
    left: -120px;
    width: 300px;
    /* height: 118px; */
    z-index: 4
}

.showcase-ground {
    position: absolute;
    bottom: -89px;
    left: 0;
    right: 0;
    height: 90px;
    background-image: url(../../../assets/images/home/hero/hero-ground.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 2
}

@media (max-width:1024px) {
    .video-showcase-section {
        min-height: 500px;
        padding: 40px 0 60px
    }

    .showcase-island-3 {
        width: 120px;
        bottom: 40%
    }

    .showcase-island-2 {
        width: 140px;
        bottom: 30%
    }

    .video-blue-container {
        box-shadow: 0 0 0 20px hsla(0, 0%, 100%, .1);
        z-index: 2;
    }
}

@media (max-width:768px) {
    .video-showcase-section {
        min-height: 400px;
        padding: 30px 0 40px
    }

    .video-blue-container {
        width: 90vw;
        box-shadow: 0 0 0 15px hsla(0, 0%, 100%, .1)
    }

    .showcase-ground,
    .showcase-island-2,
    .showcase-island-3 {
        display: none
    }
}

@media (max-width:360px) {
    .video-showcase-section {
        min-height: 300px;
        padding: 20px 0 30px
    }

    .video-blue-container {
        box-shadow: 0 0 0 10px hsla(0, 0%, 100%, .1);
        z-index: 2;
    }
}