.gallery__area-1{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  @media only screen and (min-width: 576px) and (max-width: 991px) {
    .gallery__area-1{
      padding-top: 40px;
      padding-bottom: 40px;
    }
  }
  
  @media only screen and (max-width: 576px){
    .gallery__area-1{
      padding-top: 30px;
      padding-bottom: 30px;
    }
  }

.gallery-img{
    max-width: 100%;
    height: auto;
}

.gallery{
    margin: 0 0.65rem;
}

.gallery-item {
    height: auto;
    /* margin: 0.5rem; */
    padding: 3px;
    /* border: 2px black solid; */
    /* border-radius: 50%; */
}

.gallery-item img {
    width:  100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .gallery{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 300px);
        grid-auto-flow: row dense;
    }

    .gallery-item:first-child{
        grid-row: span 1;
    }

    .gallery-item:nth-child(2){
        grid-column: 2 / 3;
        grid-row: span 2;
    }

    .gallery-item:nth-child(6),
    .gallery-item:nth-child(8){
        grid-row: span 2;
    }
}

@media (min-width: 960px) {
    .gallery{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto-flow);
        grid-auto-flow: row dense;
    }

    .gallery-item:first-child,
    .gallery-item:nth-child(7),
    .gallery-item:nth-child(5){
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item:nth-child(2){
        grid-column: span 2;
        grid-row: span 2;
    }
    .sm-p-10{
        padding: 10px;
    }
}