/*------- what we're known for: slider (Figma: node 500:3) -------*/

.known-slider.js-known.slick-initialized
{
 display: block;
}

.known-slider:has(.slick-arrow){
    padding-bottom:80px;
    margin-bottom:20px !important;
}


.sec-known
{
    .known-slider{
        display:flex;
        flex-wrap:wrap;
        margin:0 -10px;
        .slick-arrow
        {
            top:100%;
        }
        .slick-prev{
            left:50%;
            margin-left:-48px;
        }
        .slick-next{
            right:50%;
            margin-right:-48px;
        }
    }
    .content-width{
        & p{
            max-width:605px;
            margin:0 auto;
        }
    }
    .known-card{
         width: 33.333%;
        padding: 0 10px;
        padding-bottom:2px;
    }
    .js-known.known-slider:not(.slick-initialized) .known-card:not(:nth-child(-n + 3)){
        display:none;
    }
    .known-img {
        position: relative;
        overflow: hidden;
        border-radius: 2px;
        margin-bottom: 30px;

        & img {
             border-radius: 2px;
            display: block;
            width: 100%;
            aspect-ratio: 580 / 600;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            transform:scale(1);
             transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
                    object-position: 50% 80%;
        }
    }
     .known-img::before {
        position: absolute;
        content: "";
        inset: 0;
        z-index: 1;
        opacity: 0.3;
        background: radial-gradient(64.78% 64.78% at 49.19% 19.05%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.93) 100%);
        
    }
    .known-img::after {
    content:"";
    position:absolute;
    inset:-20%;

    background:linear-gradient(
        115deg,
        transparent 25%,
        rgba(255,255,255,.02) 40%,
        rgba(255,255,255,.12) 50%,
        rgba(255,255,255,.02) 60%,
        transparent 75%
    );

    transform:translateX(-150%) rotate(0deg);
   

    opacity:0;

     
    }

    .known-title {
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -0.72px;
        text-transform: capitalize;
        color: var(--black);
        font-family: var(--font-body-family);
        margin-bottom: 14px;
    }

    
    .known-price {
        margin-top: auto;
        font-size: 40px;
        line-height: 1;
        letter-spacing: -0.8px;
        color: var(--theme);
        font-family: var(--font-body-family);
        margin-bottom: 22px;
    }
    .known-bottom{
      max-width:480px;  
      margin:0 auto;
      text-align:center;
      position: relative;
      flex: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .known-bottom:before{
        position: absolute;
        content: "";
        width:2px;
        height:24px;
        background-color:var(--white);
        left: 0;
        top: 0;
        right: 0;
        margin: -30px auto 0;
        z-index: 1;
        transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
          transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
    }
    .known-card:hover .known-img img {
        transform: scale(1.06);
            transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
    }
   
    .known-card:hover .known-img::after
    {
        animation:naturalReflection 3.8s cubic-bezier(.19,1,.22,1); 
    }
    .known-card:hover .known-bottom:before
    {
        height:15px;
          transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
    }

    .known-card>a {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        height: 100%;
        flex-direction: column;
    }   

    .known-slider.js-known .slick-track
    {
        display:flex;
    }
    .known-slider.js-known .slick-slide{
        height:auto;
    }
    .known-slider.js-known .slick-slide>div{
        display:flex;
        flex-wrap:wrap;
        height:100%;
    }
}

@keyframes naturalReflection{
    0%{
        transform:translateX(-150%);
        opacity:0;
    }

    15%{
        opacity:1;
    }

    100%{
        transform:translateX(150%);
        opacity:0;
    }
}


/* RESPONSIVE  MEDIA QUERY */
@media (max-width:1599.98px) {

} 

@media (max-width:1439.98px) {
    .sec-known {
        .known-slider{
            margin:0 -5px;
        }
        .known-card {
            padding:0 5px;
        }
        .known-title{
            font-size:30px;
        }
    }
    .known-slider:has(.slick-arrow) {
        padding-bottom: 60px;
        margin-bottom: 20px !important;
    }
}

@media (max-width:1199.98px) {

}

@media (max-width: 991.98px) {
    .sec-known {
        .known-slider:not(.slick-initialized)>.known-card {
            width: 50%;
        }

        .known-title {
            font-size: 30px;
        }

        .known-price {
            font-size: 34px;
        }
        .js-known.known-slider:not(.slick-initialized) .known-card:not(:nth-child(-n + 2)) {
            display: none;
        }
    }
      .known-slider:has(.slick-arrow) {
        padding-bottom:40px;
        margin-bottom: 20px !important;
    }
}


@media (max-width: 575.98px) {
    .sec-known {
       
        .known-title {
            font-size: 26px;
        }

        .known-price {
            font-size: 30px;
        }
    }
    .sec-known .known-slider:not(.slick-initialized)>.known-card {
        width: 100%;
        max-width: 420px;
    }
    .js-known.known-slider:not(.slick-initialized) .known-card:not(:nth-child(-n + 1)) {
            display: none;
        }
    .known-slider.js-known .slick-list
    {
        padding-left:0 !important;
    }
}