video {
    position: absolute;
    /*top: 0;*/
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    bottom: 20%; /* hide video behind other content */
    overflow: hidden; /* hide video behind other content */
    z-index: -1; /* hide video behind other content */
}

.trigger {
    display: flex;
    width: 20%;
    height: 100%;
    position: absolute;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
    content: '';
    cursor: pointer;
    opacity: 0;
    transition-delay: 2s;
    transition-duration: 1s;
    top: 150px;
}

.animate {
    opacity: 1;
    top: 0px;
}

#playvid1 {
    left: 18.5%;
    /*background-color: rgba(0, 128, 0, 0.222);*/
}

#playvid1:hover .logo {
    transform: scale(1.1);
}

#playvid1::after .logo {
    filter: opacity(0);
}

#playvid2 {
    left: 40%;
}

#playvid2:hover .logo {
    transform: scale(1.1);
}

#playvid3 {
    left: 61.5%;
    /*background-color: rgba(128, 0, 0, 0.222);*/
}

#playvid3:hover .logo {
    transform: scale(1.1);
}

#karabiner {
    position: relative;
    height: 100%;
    user-select: none;
}

#video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio, adjust as needed */
}

.logo {
    position: relative;
    width: 80%;
    bottom: 30%;
    filter: opacity(1);
    transition: all 0.5s ease;
}

@media (max-width: 600px) {
    video {
        position: absolute;
        top: 0;
        left: 0;
        width: 120%;
        height: 120%;
        display: none;
        padding-bottom: 50px;
    }

    .logo {
        position: relative;
        width: 80%;
        bottom: 0px;
        filter: opacity(1);
        transition: all 0.5s ease;
    }
}