:host{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px
}


    .carusel-slides{
      width: 100%;
      position: relative;
      mask-image: linear-gradient(to right, transparent 0%, #FFF 10%, #FFF 90%, transparent 100%);;
      swiper-container{
        margin-inline: -220px;
        .carusel-item{
          display: block;
          width: 582px;
          height: 360px;
          object-fit: cover;
          border-radius: 16px;
          cursor: pointer;
        };
      }
    }


    .carusel-mask{
      position: absolute;
      left: -220px;
      top: 0;
      width: calc(100% + 440px);
      height: 100%;
      background-color: rgba(255, 255, 255, 0.63);
      z-index: 1;
      pointer-events: none;
      // background: linear-gradient(to right, var(--clr-gr-lt) 8%, transparent 15%, transparent 85%, var(--clr-gr-lt) 92%);
    }

    .carusel-navigation{
      display: flex;
      justify-content: center;
      gap: 20px;
      .carusel-navigation-counter{
        width: auto;
        top: auto;
      }
      button{
        position: relative;
        border: none !important;
        background-color: transparent !important;
        left: auto;
        right: auto;
        padding: 0;
        &::after{
          content: none !important;
        }
      }
    }


    .selected{
      width: 100vw;
      height: 100vh;
      position:fixed;
      top: 0;
      left: 0;
      background-color: var(--clr-black-lt);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 20;
      cursor: pointer;
      img{
        max-width: calc(100% - 30px);
        max-height: calc(100% - 30px);
      }
    }

    .swiperMobile{
      display: none;
    }

    @media screen and (max-width: 1240px) {

      .carusel-slides{

        swiper-container{

          .carusel-item{

            width: 95%;
            height: 85%;

          };
        }
      }

    }
  
    @media screen and (max-width: 1024px) {
      :host{
        gap:20px;
      }

      .carusel-slides{
        mask-image:none;
        height: 75vw;
        swiper-container.swiperMobile{
          display: block;
          margin-inline: 0;
          height: auto;
          .carusel-item{
            display: block;
            width: 100%;
            object-fit: cover;
            border-radius: 16px;
            height: auto;
            border-radius: 12px;
            cursor: pointer;
          };
  
  
        }
        .swiperDesktop{
          display: none;
        }
      }

      .selected{
        img{
          max-width: 100%;
          max-height: 100%;
        }
      }

    }
