/* .videos [type=radio] {
    display: none;
  }
  
  #slider {
    height: 35vw;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
  } */
  
  /* #slider label {
    margin: auto;
    width: 40%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    left: 0; right: 0;
    cursor: pointer;
    transition: transform 0.4s ease;
  } */


  /* #slider label {
    margin: auto;
    width: 40%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    left: 0;
    right: 0;
    cursor: pointer;
    transition: transform 0.4s ease, scale 0.4s ease; 
}

#slider label:hover {
    transform: scale(1.1);
}
  
  #s1:checked ~ #slide4, #s2:checked ~ #slide5,
  #s3:checked ~ #slide1, #s4:checked ~ #slide2,
  #s5:checked ~ #slide3 {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
    transform: translate3d(-100%,0,-200px);
  }
  
  #s1:checked ~ #slide5, #s2:checked ~ #slide1,
  #s3:checked ~ #slide2, #s4:checked ~ #slide3,
  #s5:checked ~ #slide4 {
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
    transform: translate3d(-50%,0,-100px);
  }
  
  #s1:checked ~ #slide1, #s2:checked ~ #slide2,
  #s3:checked ~ #slide3, #s4:checked ~ #slide4,
  #s5:checked ~ #slide5 {
    box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
    transform: translate3d(0,0,0);
  }
  
  #s1:checked ~ #slide2, #s2:checked ~ #slide3,
  #s3:checked ~ #slide4, #s4:checked ~ #slide5,
  #s5:checked ~ #slide1 {
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
    transform: translate3d(50%,0,-100px);
  }
  
  #s1:checked ~ #slide3, #s2:checked ~ #slide4,
  #s3:checked ~ #slide5, #s4:checked ~ #slide1,
  #s5:checked ~ #slide2 {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
    transform: translate3d(100%,0,-200px);
  }
   */
  /* #slide1 { background: #00BCD4 }
  #slide2 { background: #4CAF50 }
  #slide3 { background: #CDDC39 }
  #slide4 { background: #FFC107 }
  #slide5 { background: #FF5722 } */





  .videos .carousel {
        position: relative;
        left: 50%;
        top: 50%;
    
    }
    .videos .carousel__item {
        position: relative;
        height: 350px;
        width: 300px;
        overflow: hidden;
        box-shadow: 0 1rem 4rem rgba(0, 0, 0, .5);
        position: absolute;
        transform: translate(-50%, -50%) scale(.1);
        z-index: 0;
        transition: all .2s linear;
        border-radius: 20px;
    }
    .videos .carousel__item img {
        width: 100%;
        min-height: 100%;
        object-fit: cover;
    }
    
    .videos .carousel__item--main {
        transform: translate(-50%,-50%) scale(1);
        z-index: 2;
        cursor: pointer;
    }
    
    .videos .carousel__item--left {
        transform: translate(-110%,-50%) scale(.9);
        z-index: 1;
    }
    .videos .carousel__item--right {
        transform: translate(10%,-50%) scale(.9);
        z-index: 1;
    }
    .videos .carousel__item--left img, .carousel__item--right img {
        filter: grayscale(80%);
    }
    
    .videos .carousel__item--right:hover {
        transform: translate(10%,-50%) scale(1.2);
        z-index: 3;
        cursor: pointer;
    }
    .videos .carousel__item--left:hover {
        transform: translate(-110%,-50%) scale(1.2);
        z-index: 3;
        cursor: pointer;
    }
    .videos .carousel__item--main:hover {
        transform: translate(-50%,-50%) scale(1.2);
    }
    .videos .carousel__item:hover > .carousel__text {
        opacity: 1;
    }
    .videos .carousel__item:hover img {
        filter: grayscale(0%);
    }
    
    .videos .carousel__text {
        position: absolute;
        bottom: 0;
        z-index: 4;
        opacity: 0;
        transition: opacity .2s;
        width: 100%;
        text-align: center;
        background-color: rgba(0,0,0,.5);
        padding: 2rem 1rem;
        color: #fff;
    }
    
    
    .videos .carousel__btns {
        position: absolute;
        transform: translate(-50%, 22rem);
        display: flex;
        gap: 2rem;
    }
    .videos .carousel__btn {
        background-color: transparent;
        height: 5rem;
        width: 5rem;
        border-radius: 50%;
        border:1px solid currentColor;
        color: #fff;
        cursor: pointer;
    }
    .videos  .carousel__btn svg {
        height: 1.8rem;
        width: 1.8rem;
    }
    .videos .carousel__btn:hover {
        color: #aaa;
    }