.section_images {
    &__bg {
        position: relative;
        box-sizing: content-box;
        width: 100%;
        max-width: 836px;
        border: 30px solid $color-light;
        background-color: $color-light;
        background-size: 100% auto;
        box-shadow: 0 13px 26px rgba($color-dark, .35);
        
        
        
        &.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: 1681px) {
            max-width: 836px;
        }
        
        @media (max-width: 1680px) {
            max-width: 600px;
        }
    
        @media (max-width: 1280px) {
            max-width: 500px;
        }
        
        @include media-breakpoint-down(xl) {
            max-width: 720px;
        }
    
        @include media-breakpoint-down(md) {
            max-width: 100%;
            border: 10px solid $color-light;
        }
    }
}