.swiper-extended .section .swiper-slide{

  &[size='small'] {
    height: 17.5rem;
  }

  &[size='medium'] {
    height: 21.25rem;
  }

  &[size='large'] {
    height: 25rem;
  }

  &[size='x-large'] {
    height: 29rem;
  }

  @media screen and (min-width: 750px) {
    &[size='small'] {
      height: 26.25rem;
    }

    &[size='medium'] {
      height: 35rem;
    }

    &[size='large'] {
      height: 45rem;
    }

    &[size='x-large'] {
      height: 50rem;
    }
  }

  @media screen and (min-width: 1024px) {
    &[size-desktop='small'] {
      height: 28.125rem;
    }

    &[size-desktop='medium'] {
      height: 35rem;
    }

    &[size-desktop='large'] {
      height: 45rem;
    }
  }

}

.swiper-extended {

  .swiper-main-wrapper{
    position: relative;

    .swiper-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      bottom: var(--swiper-pagination-bottom, -18px);

      .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        border: none;
        background: #002d40;
        cursor: pointer;
      }

      .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #002d40;
        width: 8px;
        height: 8px;
      }

      &.hide_mobile {
        display: none;
      }

      @media screen and (min-width: 1024px) {
        &.hide_desktop {
          display: none;
        }
      }

    }

  }

  .swiper-slide .progress-ring { 
    position:absolute;
    bottom: 10px;
    right: 10px;

    &.hide_mobile {
      display: none;
    }

    @media screen and (min-width: 1024px) {
      &.hide_desktop {
        display: none;
      }
    }
  }

  .swiper-slide-active .progress-ring{ 
      display:block; 

      .ring {
        stroke:#ffffff;
        stroke-dasharray: 213.6;   
        stroke-dashoffset: 213.6;    
        transform: rotate(-90deg);  
        transform-origin: 50% 50%;
        animation: fill-circle var(--load-time) linear forwards;
      }

      .ring-bg {
        opacity: 1;
      }

  }
  

}

@keyframes fill-circle {
  from { stroke-dashoffset: 213.6; }
  to   { stroke-dashoffset: 0; }
}