.home-grid {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  list-style: none;
  grid-gap: 0rem;
  line-height: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  background:transparent;
}

.main{
  position: relative;
  width: 100%;
  margin: auto;
  top: 62px;
}




.home-grid li {
  position: relative;
  --cols: 1;
  --rows: 1;
  background: transparent;
  line-height: 0;
  /* border:5px solid tomato; */
  margin: 30px 10px;
}


.home-grid li:first-child {
  grid-column: 3 / span 1;
  grid-row: 1 / 4;
}



.home-grid li:nth-child(2) {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.home-grid li:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(4) {
  grid-column: 1 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(5) {
  grid-column: 3 / span 1;
  grid-row: 3;
}

.home-grid li:nth-child(6) {
  grid-column: 1 / span 1;
  grid-row: 4;
}

.home-grid li:nth-child(7) {
  grid-column: 2 / span 1;
  grid-row: 4;
}

.home-grid li:nth-child(8) {
  grid-column: 1 / span 2;
  grid-row: 6;
}

.home-grid li:nth-child(9) {
  grid-column: 2 / span 2;
  grid-row: 7;
}

.home-grid li:nth-child(10) {
  grid-column: 1 / span 1;
  grid-row: 8;
}


.home-grid li:nth-child(11) {
  grid-column: 2 / span 2;
  grid-row: 8;
}

.home-grid li:nth-child(12) {
  grid-column: 2 / span 1;
  grid-row: 9;
}

.home-grid li:nth-child(13) {
  grid-column: 1 / span 2;
  grid-row: 10;
}


.home-grid li:nth-child(14) {
  grid-column: 2 / span 2;
  grid-row:11;
}

.home-grid li:nth-child(15) {
  grid-column: 1 / span 1;
  grid-row: 12;
}

.home-grid li:nth-child(16) {
  grid-column: 2 / span 2;
  grid-row: 12;
}

.home-grid a {
  display: block;
  /* height:fit-content; */
}

.home-grid img {
  position: relative;
  width:100%;
  margin: 0px;
  background: transparent;
  transition: all .3s;
  transition: 0s;
  /* outline: 8px solid white;
  outline-offset: -8px; */
  /* background: var(--color-box);  */
}




/* .home-grid img:hover{
  border-radius:0%;
} */

.home-grid figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1;
  text-align: center;
  background: rgba(0,0,0, .5);
}

@media screen and (max-width: 1300px) {
  .home-grid {
    width: 98%;
    grid-template-columns: repeat(3, 1fr);
  }


.home-grid li:first-child {
  grid-column: 2 / span 2;
  grid-row: 1;
}



.home-grid li:nth-child(2) {
  grid-column: 1 / span 1;
  grid-row: 1;
}

.home-grid li:nth-child(3) {
  grid-column: 2 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(4) {
  grid-column: 1 / span 1;
  grid-row: 2;
}

.home-grid li:nth-child(5) {
  grid-column: 2 / span 1;
  grid-row: 3;
}

.home-grid li:nth-child(6) {
  grid-column: 1 / span 1;
  grid-row: 4;
}

.home-grid li:nth-child(7) {
  grid-column: 2 / span 2;
  grid-row: 5;
}

.home-grid li:nth-child(8) {
  grid-column: 1 / span 2;
  grid-row: 6;
}

.home-grid li:nth-child(9) {
  grid-column: 2 / span 2;
  grid-row: 7;
}

.home-grid li:nth-child(10) {
  grid-column: 1 / span 1;
  grid-row: 8;
}


.home-grid li:nth-child(11) {
  grid-column: 2 / span 2;
  grid-row: 8;
}

.home-grid li:nth-child(12) {
  grid-column: 2 / span 1;
  grid-row: 9;
}

.home-grid li:nth-child(13) {
  grid-column: 1 / span 2;
  grid-row: 10;
}


.home-grid li:nth-child(14) {
  grid-column: 3 / span 1;
  grid-row:11;
}

.home-grid li:nth-child(15) {
  grid-column: 1 / span 1;
  grid-row: 12;
}

.home-grid li:nth-child(16) {
  grid-column: 2 / span 2;
  grid-row: 12;
}
}


@media screen and (max-width: 900px) {
  .home-grid {
    width: 98%;
    display: block;
    padding-bottom:100px;
  }
  .home-grid li {
  margin: 20px 10px;
}
}