.fancybox {
    width: 100%;
    position: relative;
  }
  
  .fancybox .grid-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    position: relative;
    width: 480px;
  }
  
  .fancybox .grid-item {
    width: 96px;
    height: 96px;
    position: relative;
    z-index: 16;
    background: #fff;
    opacity: 0;
  }
  
  .fancybox .grid-item:hover:nth-of-type(5n + 1) ~ .grid-content .img-details p {
    left: 0px;
  }
  
  .fancybox .grid-item:hover:nth-of-type(1n + 1) ~ .grid-content .img-details p {
    top: 0px;
  }
  
  .fancybox .grid-item:hover:nth-of-type(5n + 2) ~ .grid-content .img-details p {
    left: -12.5%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(1n + 6) ~ .grid-content .img-details p {
    top: -12.5%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(5n + 3) ~ .grid-content .img-details p {
    left: -25%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(1n + 11) ~ .grid-content .img-details p {
    top: -25%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(5n + 4) ~ .grid-content .img-details p {
    left: -37.5%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(1n + 16) ~ .grid-content .img-details p {
    top: -37.5%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(5n + 5) ~ .grid-content .img-details p {
    left: -50%;
  }
  
  .fancybox .grid-item:hover:nth-of-type(1n + 21) ~ .grid-content .img-details p {
    top: -50%;
  }
  
  
  .fancybox .grid-item ~ .grid-content .img-details p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .fancybox .grid-item ~ .grid-content .img-details img {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100%;
  }
  
  .fancybox .grid-item:hover ~ .grid-content .img-details p {
    width: 150%;
    height: 150%;
  }
  
  .fancybox .grid-item:hover ~ .grid-content .img-details p img {
    position: absolute;
    top: 0;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    height: 100%;
  }
  
  .fancybox input[name='slide_switch'] {
    display: none;
  }
  
  .fancybox .img-details {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    text-align: center;
    z-index: 2;
    width: 460px;
    height: 460px;
    overflow: hidden;
    background: #fff;
    display: none;
  }
  
  .fancybox .img-details p {
    width: 100%;
    height: 100%;
  }

  .fancybox input[name='slide_switch']#pro-id01:checked ~ .carousel .inner article:nth-child(1) label,
  .fancybox input[name='slide_switch']#pro-id02:checked ~ .carousel .inner article:nth-child(2) label,
  .fancybox input[name='slide_switch']#pro-id03:checked ~ .carousel .inner article:nth-child(3) label,
  .fancybox input[name='slide_switch']#pro-id04:checked ~ .carousel .inner article:nth-child(4) label,
  .fancybox input[name='slide_switch']#pro-id05:checked ~ .carousel .inner article:nth-child(5) label,
  .fancybox input[name='slide_switch']#pro-id06:checked ~ .carousel .inner article:nth-child(6) label,
  .fancybox input[name='slide_switch']#pro-id07:checked ~ .carousel .inner article:nth-child(7) label,
  .fancybox input[name='slide_switch']#pro-id08:checked ~ .carousel .inner article:nth-child(8) label,
  .fancybox input[name='slide_switch']#pro-id09:checked ~ .carousel .inner article:nth-child(9) label,
  .fancybox input[name='slide_switch']#pro-id010:checked ~ .carousel .inner article:nth-child(10) label,
  .fancybox input[name='slide_switch']#pro-id011:checked ~ .carousel .inner article:nth-child(11) label,
  .fancybox input[name='slide_switch']#pro-id012:checked ~ .carousel .inner article:nth-child(12) label{
      border-color: #333;
  }

  .fancybox label.carousel__item:focus{
     border-color: #333; 
  }
  
  .fancybox label img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
  }
  
  .grid-content {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .fancybox label:not(.carousel__control) {
    width: 78px;
    height: 78px;
    cursor: pointer;
    position: relative;
    border: 2px solid rgba(0, 0, 0, 0);
    overflow: hidden;
  }
  
  @media (max-width: 1199.98px) {
    .fancybox label:not(.carousel__control) {
      width: 75px;
      height: 75px;
    }
  }
  
  .fancybox input[name='slide_switch']:checked + label {
    border: 1px solid #ef7d1c;
    -webkit-transition: border 0.1s;
    -o-transition: border 0.1s;
    transition: border 0.1s;
  }
  
  .fancybox input[name='slide_switch'] ~ .img-details {
    display: none;
  }
  
  .fancybox input[name='slide_switch']:checked + label + .img-details {
    display: block;
    z-index: 13;
    background: #fff;
  }
  
  .fancybox input[name='slide_switch'][value=""]:checked + label + .img-details {
    display: none;
  }
  .fancybox input[name='slide_switch']#pro-id01:checked ~ .img-details-01,
  .fancybox input[name='slide_switch']#pro-id02:checked ~ .img-details-02,
  .fancybox input[name='slide_switch']#pro-id03:checked ~ .img-details-03,
  .fancybox input[name='slide_switch']#pro-id04:checked ~ .img-details-04,
  .fancybox input[name='slide_switch']#pro-id05:checked ~ .img-details-05,
  .fancybox input[name='slide_switch']#pro-id06:checked ~ .img-details-06,
  .fancybox input[name='slide_switch']#pro-id07:checked ~ .img-details-07,
  .fancybox input[name='slide_switch']#pro-id08:checked ~ .img-details-08,
  .fancybox input[name='slide_switch']#pro-id09:checked ~ .img-details-09,
  .fancybox input[name='slide_switch']#pro-id10:checked ~ .img-details-10,
  .fancybox input[name='slide_switch']#pro-id11:checked ~ .img-details-11,
  .fancybox input[name='slide_switch']#pro-id12:checked ~ .img-details-12 {
    display: block;
  }
  @media(max-width: 1199px){
    .fancybox .img-details,.fancybox .grid-wrapper{
        width: 370px;
        height: 370px;
    }
    .fancybox .grid-item{
        width: 71px;
        height: 75px;
    }
    .fancybox label:not(.carousel__control){
        width: 60px;
        height: 60px;
    }
  }
  @media (max-width: 991px){
    .fancybox .img-details{
      width: 300px;
      height: 300px;
    }
    .fancybox .grid-wrapper{
      width: 300px;
    }
    .fancybox .grid-item{
      width: 50px;
      height: 60px;
    }
    .fancybox label:not(.carousel__control){
      width: 45px;
      height: 45px;
    }
  }