@use '../../../../src/scss/utilities.scss';
.slideofODS{
    &_title{
        @extend %VFSans-font;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: var(--b-medianoche);
    }
    &_subtitle{
        @extend %openSans-font;
        font-size: 1.1rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #27251f;
    }
    &_tumbs{
        &__img{
            width: 100%;
            aspect-ratio: 1/1;
            @supports not (aspect-ratio: 1 / 1) {
                height: auto;
            }
            object-fit: cover;
            cursor: pointer;
        }
        .swiper-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 0px;
            display: none;
            @media (max-width: 991.98px) {
                display: flex;
            }
            .swiper-pagination-bullet {
              color:#004976;
              background-color: transparent;
              border: 1px solid #004976;
              height: 20px;
              width: 20px;
              font-size: 1rem;
              opacity: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              &-active {
                border: 1px solid #991e66;
                background-color: #991e66;
                color: #fff;
              }
            }
        }
        .swiper-wrapper .swiper-slide.swiper-slide-thumb-active{
            &::after{
                content: '';
                position: absolute;
                bottom: -1.5rem;
                left: 0;
                width: 100%;
                height: 4px;
                background-color: var(--color);
                @media (max-width: 991.98px) {
                    bottom: -0.7rem;
                }
            }
        }
    }
    &_mainslide{
        &card{
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 5%;
            grid-template-columns: 45% 50%;
            background-color: #f6fcff;
            width: 100%;
            height: 100%;
            @media (max-width: 991.98px) {
                grid-template-columns: 100%;
            }
            &__img{
                width: 100%;
                aspect-ratio: 16/9;
                @supports not (aspect-ratio: 16 / 9) {
                    height: auto;
                }
                height: auto;
                object-fit: cover;
                @media (max-width: 991.98px) {
                    display: none;
                }
            }
            &__title{
                @extend %VFSans-font;
                font-size: 33px;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.17;
                letter-spacing: normal;
                color: var(--color);
            }
            &__content{
                @extend %openSans-font;
                font-size: 20px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.46;
                letter-spacing: normal;
                color: #004976;
            }
        }
    }
}