/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.swiper {
    --swiper-navigation-color: #111;
    --swiper-navigation-size: 12px;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-size: 8px;
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

@media (max-width: 1024px) {
    .swiper {
        --swiper-pagination-bullet-size: 10px;
    }
}

.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
    display: flex !important;
}

.swiper-button-prev svg,
.swiper-button-next svg {
    width: 18px !important;
    height: 18px !important;
    fill: #111;
}

.swiper-button-prev,
.swiper-button-next {
    display: none !important;
    background-color: rgba(255, 255, 255, 0.7);
    /*background-image: url("images/next.svg") !important;*/
    border-radius: 50%;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    /*align-items: center;*/
    /*justify-content: center;*/
}

@media (max-width: 1024px) {
    .swiper-button-prev,
    .swiper-button-next {
        width: 48px !important;
        height: 48px !important;
    }
}

.swiper-button-prev::after,
.swiper-button-next::after{
    content: none !important;
}