.section_images {
    &__bg {
        position: relative;
        box-sizing: content-box;
        max-height: calc(100vh - 60px - 40px);
        width: 100%;
        max-width: 1036px;
        border: 30px solid $color-light;
        background-color: $color-light;
        background-size: 100% auto;
        box-shadow: 0 13px 26px rgba($color-dark, .35);
        
        .image {
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: .25s $easeOut;
            opacity: 0;
            
            &--1 {
                opacity: 1;
                background-image: url('../images/swieta-off.jpg');
            }
            
            &--2 {
                background-image: url('../images/swieta-on.jpg');
            }
        }
        
        > div {
            padding-bottom: 83.5907%;
            
            &::before,
            &::after {
                position: absolute;
                z-index: -1;
                top: 0;
                width: 268px;
                height: 100%;
                content: '';
                transition: .25s $easeOut;
                opacity: 0;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
    
                @media (max-width: 1280px) {
                    max-width: 150px;
                }
    
                @media (max-width: 960px) {
                    max-width: 125px;
                }
    
                @media (max-width: 600px) {
                    max-width: 100px;
                }
            }
            
            &::before {
                left: 50px;
                background-image: url('../images/ozdoby-l.png');
            }
            
            &::after {
                right: 50px;
                background-image: url('../images/ozdoby-r.png');
            }
        }
        
        &.active {
            > div {
                &::before,
                &::after {
                    opacity: 1;
                }
                
                &::before {
                    left: -125px;
                    @media (max-width: 960px) {
                        left: -60px;
                    }
    
                    @media (max-width: 600px) {
                        left: -30px;
                    }
                }
                
                &::after {
                    right: -125px;
                    @media (max-width: 960px) {
                        right: -60px;
                    }
    
                    @media (max-width: 600px) {
                        right: -30px;
                    }
                }
            }
            
            .image {
                &--1 {
                    opacity: 1;
                }
                
                &--2 {
                    opacity: 1;
                }
            }
        }
    
        @media (min-width: 1441px) {
            max-width: 1036px;
        }
        
        @media (max-width: 1440px) {
            max-width: 700px;
        }
    
        @media (max-width: 1280px) {
            max-width: 600px;
        }
        
        @include media-breakpoint-down(xl) {
            max-width: 720px;
        }
    
        @include media-breakpoint-down(md) {
            max-width: 100%;
            border: 10px solid $color-light;
        }
    }
    
    &__button {
        font-size: 38px;
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-block;
        padding: 23px 60px 23px 23px;
        cursor: pointer;
        transition: .35s $easeOut;
        transform: translateX(-50%) translateY(-50%);
        opacity: 1;
        color: $color-light;
        background-color: $color-secondary;
    
        @include media-breakpoint-down(lg) {
            font-size: 24px;
            padding: 14px 40px 14px 20px;
        }
        
        @include media-breakpoint-down(md) {
            font-size: 16px;
            padding: 8px 30px 8px 10px;
        }
        
        &::after {
            position: absolute;
            top: 50%;
            right: 23px;
            display: inline-block;
            width: 0;
            height: 0;
            content: '';
            transform: translateY(-50%);
            border-width: 10px 0 10px 17px;
            border-style: solid;
            border-color: transparent transparent transparent $color-light;
    
            @include media-breakpoint-down(lg) {
                right: 15px;
                border-width: 7px 0 7px 12px;
            }
            
            @include media-breakpoint-down(md) {
                right: 10px;
                border-width: 5px 0 5px 8px;
            }
        }
        
        &:hover {
            animation: wobble 1.25s infinite;
        }
        
        &.fadeOut {
            top: 125%;
            opacity: 0;
        }
    }
}

@keyframes wobble {
    0%,
    100% {
        transform: translateX(-50%) translateY(-50%);
    }
    15% {
        transform: translateX(calc(-50% - 30px)) translateY(-50%) rotate(-6deg);
        -ms-transform: translateX(-50%) translateX(-30px) translateY(-50%) rotate(-6deg);
    }
    30% {
        transform: translateX(calc(-50% + 15px)) translateY(-50%) rotate(6deg);
        -ms-transform: translateX(-50%) translateX(15px) translateY(-50%) rotate(6deg);
    }
    45% {
        transform: translateX(calc(-50% - 15px)) translateY(-50%) rotate(-3.6deg);
        -ms-transform: translateX(-50%) translateX(-15px) translateY(-50%) rotate(-3.6deg);
    }
    60% {
        transform: translateX(calc(-50% + 9px)) translateY(-50%) rotate(2.4deg);
        -ms-transform: translateX(-50%) translateX(9px) translateY(-50%) rotate(2.4deg);
    }
    75% {
        transform: translateX(calc(-50% - 6px)) translateY(-50%) rotate(-1.2deg);
        -ms-transform: translateX(-50%) translateX(-6px) translateY(-50%) rotate(-1.2deg);
    }
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    
    &.active {
        opacity: 1;
    }
}

#audio {
    display: none;
}