.container.squareslider {
    display: flex;
    flex-direction: column;
    padding: 3vh 0
}

.square-slider-block {
    display: flex;
    width: 100%;
    height: fit-content;
    overflow: hidden
}

.centered-slider {
    width: 100%;
    max-width: 90vw;
    margin: 32px auto -42px !important
}

.slider-top-info {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 18px auto 32px
}

.squareslider_title {
    margin-bottom: 28px
}

.squareslider_title.align-center {
    margin: 0 auto 28px
}

.squareslider_title.align-right {
    margin: 0 10px 28px auto
}

.squareslider_description.align-center {
    text-align: center;
    max-width: 1080px;
    margin: auto
}

.squareslider_description.align-right {
    text-align: end
}

.osbuttons.align-left {
    margin: 26px auto 26px 2px !important;
    justify-content: flex-start;
}

.osbuttons.align-right {
    margin: 26px 2px 26px auto !important;
    justify-content: flex-end;
}

.osbuttons.squareslider {
    margin: 32px 0 3vh
}

.ossquasreslider {
    width: 100%;
    margin: 32px 0 44px auto
}

.swiper-wrapper.squareslider {
    height: 70vh;
    margin: auto
}

.square-swiper-container {
    width: 90vw;
    margin: 0 0 0 auto;
    overflow: visible
}

.square-slide {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 16px
}

.swiper.square-swiper {
    width: 94%;
    height: 100%;
    overflow: visible
}

.square-slide.large-slide {
    width: calc(50% - 6px) !important;
    height: 100%;
    margin-right: 12px
}

.swiper-slide.small-slide-group {
    width: 50% !important;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box
}

.square-slide.small-slide {
    width: calc(50% - 6px);
    height: calc(50% - 6px)
}

.slide-image,
.slide-image img,
.slide-inner.squareslider {
    width: 100%;
    height: 100%
}

.slide-image img {
    object-fit: cover;
    display: block
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.play-icon {
    font-size: 3rem;
    color: #fff;
    pointer-events: none
}

.slide-hover-content {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity .3s ease-in-out;
    padding: 10%;
    text-align: center;
    z-index: 3
}

.square-swiper-button-next,
.square-swiper-button-prev {
    width: 100% !important;
    height: 14px !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.slide-hover-content p {
    color: #fff;
    margin-top: 16px
}

.square-slide:hover .slide-hover-content {
    opacity: 1
}

.square-swiper-nav {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex
}

.square-swiper-button-next,
.square-swiper-button-prev {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1
}

.square-swiper-button-prev.swiper-button-prev {
    opacity: 0.44;
    top: auto;
    left: 14vw;
    width: 100px !important;
    position: absolute
}

.square-swiper-button-next.swiper-button-next {
    opacity: 0.44;
    top: auto;
    right: 32px;
    width: 100px !important;
    position: absolute
}

.square-swiper-button-prev {
    background-image: url(/wp-content/themes/Opensmjle/assets/icons/prev-arrow.svg)
}

.square-swiper-button-next {
    background-image: url(/wp-content/themes/Opensmjle/assets/icons/next-arrow.svg)
}

@media screen and (max-width:900px) {
    .square-slide.large-slide {
        width: calc(100% - 0px) !important
    }

    .swiper-slide.small-slide-group {
        width: 100% !important
    }

    .swiper-wrapper.squareslider {
        width: 100%
    }

    .square-swiper-button-prev.swiper-button-prev {
        left: 32px !important
    }

    .square-swiper-button-next.swiper-button-next {
        right: 32px !important
    }

    .square-swiper-container {
        width: 98vw
    }

    .swiper.square-swiper {
        width: 98%
    }
}