/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .banner{
      height: 200px;
    }

    .lomba{
        height: 180px;
        object-fit: cover;
    }
    
    .gbn-home{
        padding-left: 0px;
        padding-right: 0px;
    }

    .detail-lomba-gambar{
        padding-right: 0px;
    }
    
    .detail-lomba-keterangan{
        padding-left: 0px;
    }

    .galeri-umum{
      height: 130px;
      object-fit: cover;
    }

    .footer-social{
      list-style: none;
      display: inline-flex;
    }
    
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    .banner{
      height: 250px;
    }

    
    .lomba{
        height: 200px;
        object-fit: cover;
    }

    .gbn-home{
        padding-left: 0px;
        padding-right: 0px;
    }

    .detail-lomba-gambar{
        padding-right: 0px;
    }
    
    .detail-lomba-keterangan{
        padding-left: 0px;
    }
    
    .galeri-umum{
      height: 180px;
      object-fit: cover;
    }
    
    .footer-social{
      list-style: none;
      display: inline-flex;
    }
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    .banner{
      height: 350px;
    }

    .lomba{
        height: 280px;
        object-fit: cover;
    }

    .gbn-home{
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .detail-lomba-gambar{
        padding-right: 15px;
    }
    
    .detail-lomba-keterangan{
        padding-left: 20px;
    }
    
    .galeri-umum{
      height: 230px;
      object-fit: cover;
    }

    .footer-social{
      display: block;
      list-style-type: disc;
    }
    
    .galeri-gbn{
      height: 330px;
      object-fit: cover;
    }
  } 
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    .banner{
      height: 500px;
    }
    
    .lomba{
        height: 330px;
        object-fit: cover;
    }

    .detail-lomba-gambar{
        padding-right: 15px;
    }
    
    .detail-lomba-keterangan{
        padding-left: 20px;
    }
    
    .galeri-umum{
      height: 300px;
      object-fit: cover;
    }
    
    .galeri-gbn{
      height: 330px;
      object-fit: cover;
    }
  } 
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
      .banner{
        height: 500px;
      }

      .lomba{
        height: 330px;
        object-fit: cover;
      }
 
    .detail-lomba-gambar{
        padding-right: 15px;
    }

    .detail-lomba-keterangan{
        padding-left: 20px;
    }
    
    .galeri-umum{
      height: 330px;
      object-fit: cover;
    }
    
    .galeri-gbn{
      height: 330px;
      object-fit: cover;
    }
  }