.gov{
  margin:3em auto;
  width:610px;
  border:solid white 5px;
  border-radius:30px;
  box-shadow:5px 5px 25px rgba(0,0,0, .5);
  overflow:hidden;

  .thumbnail{
    display:flex;
    flex-wrap:wrap;
    
    .thumb{
      height:200px;
      width:200px;
      transition:all .2s;
      object-fit:cover;
      cursor:pointer;
      &:hover{
        box-shadow: 3px 3px 20px ;
        opacity:.8;
      }
    }
  }
}

  .desc-2{  
    position:relative;
    width:600px;
    height:400px;
    overflow:hidden;
   
    &:hover .judul{
      transform:translateY(80px);
    }
    
    &:hover .tittle{
       background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 30%,rgba(0,0,0,.3) 70%, rgba(0,0,0,.8) 100%);
      opacity:1;
    }
    
    &:hover .text{
      transform:translateY(-150px);
    }
    .prev{
        object-fit:cover;
        width:600px;
        height:400px;
    }
    .tittle{
      margin:auto;
      overflow:hidden;
      width:100%;
      height:100%;
      position:absolute;
      transition:all .3s ease;
      opacity:0;
      display:flex;
      flex-direction:column;

      .judul{
        color:white;
        padding:20px;
        margin-top:-40px;
        transition:all .3s ease;
        
      }
      
      .text{
        color:white;
        margin-top:350px;
        padding:20px;
        transition:all .35s ease .4s ;
      }
    }
  }

@keyframes fade {
  to {
    opacity:1;
  }
}

.effect {
  opacity:0;
  animation: fade .2s forwards;
}
@media screen and (max-width: 768px) {
  .gov {
    width: 90%; /* Adjust the width for smaller screens */
  }

  .gov .desc-2 {
    width: 90%; /* Adjust the width for smaller screens */
  }
}

.gallery img {
  width: 100%;
  height: 80%;
  vertical-align: top;
  object-fit: contain;
}
.gallery {
  display: flex;
  margin: 10px auto;
  max-width: 800px;
  position: relative;
  padding-top: 66.6666666667%;

}
.gallery__img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.gallery__thumb {
  padding-top: 6px;
  margin: 6px;
  display: block;
  height: 140px;
  width: 140px;
  cursor: pointer;
}
.gallery__item{
  width: 200px;
  height: 100px;
  object-fit: contain;
}
.gallery__selector {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.gallery__selector:checked + .gallery__img {
  opacity: 1;
}

@media screen and (min-width: 600px) {
  .gallery {
    padding-top: 400px;
 }
}

@media (min-width: 320px) and (max-width:375px){
  .gallery__thumb {

    display: block;
    height: 70px;
    width: 52px;
    cursor: pointer;
    object-fit: contain;
  }
  .gallery img{
    height: 70%;
  }
}
@media (min-width: 376px) and (max-width:425px){
  .gallery__thumb {

    display: block;
    height: 80px;
    width: 60px;
    cursor: pointer;
    object-fit: contain;
  }
  .gallery img{
    height: 70%;
  }
}
@media (min-width: 426px) and (max-width:550px){
  .gallery__thumb {

    display: block;
    height: 90px;
    width: 80px;
    cursor: pointer;
    object-fit: contain;
  }
  .gallery img{
    height: 70%;
  }
}
@media (min-width: 550px) and (max-width:600px){
  .gallery__thumb {
    display: block;
    height: 100px;
    width: 90px;
    cursor: pointer;
    object-fit: contain;
  }

}
@media (min-width: 600px) and (max-width:760px){
  .gallery__thumb {

    height: 130px;
    width: 110px;
    cursor: pointer;
    object-fit: contain;
  }

}