.hero-bg-panels {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 105%;
    max-width: 105%;
    height: 85%;
    display: flex;
    z-index: 0;
}

.bg-panel {
    height: 100%;
    position: relative;
    transition: flex 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.panel-1 {
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    flex: 1;
}

.panel-2 {
    clip-path: polygon(4% 0, 100% 0, 92% 100%, 0 100%);
    margin-left: -4%;
    flex: 1;
}

.panel-3 {
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -4%;
    flex: 0.96;
}

.bg-panel img,
.bg-panel video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.bg-panel video.panel-gif {
    background: transparent;
    pointer-events: none;
}

.bg-panel {
    background-color: #0a0a0a;
}

.panel-static {
    opacity: 1;
    z-index: 1;
}

.panel-gif {
    opacity: 0;
    z-index: 2;
}

.bg-panel:hover .panel-gif,
.bg-panel.force-hover .panel-gif {
    opacity: 1;
}

.panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3;
    pointer-events: none;
    transition: background 0.3s ease;
}

.panel-1:hover,
.panel-2:hover,
.panel-1.force-hover,
.panel-2.force-hover {
    flex: 1.2;
}

.panel-3:hover,
.panel-3.force-hover {
    flex: 1.15;
}

.bg-panel:hover .panel-overlay,
.bg-panel.force-hover .panel-overlay {
    background: rgba(0, 0, 0, 0.45);
}

.hero-visual {
    display: none !important;
}

@media (max-width: 768px) {
    .hero-bg-panels {
        height: 70%;
    }

    .panel-1 {
        clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    }

    .panel-2 {
        clip-path: polygon(3% 0, 100% 0, 95% 100%, 0 100%);
        margin-left: -3%;
    }

    .panel-3 {
        clip-path: polygon(3% 0, 100% 0, 100% 100%, 0 100%);
        margin-left: -3%;
        flex: 0.98;
    }
}