/* custom responsive grid layout */

.grid {
  display: grid;
  /*grid-template-rows: repeat(6, 1fr);*/
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0px;
}
.col-span-12, .col-span-11, .col-span-10, .col-span-9, .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4, .col-span-3, .col-span-2, .col-span-1 {
  padding: 10px;
}

.col-span-12 {
  grid-column: span 12;
}
.col-span-11 {
  grid-column: span 11;
}
.col-span-10 {
  grid-column: span 10;
}
.col-span-9 {
  grid-column: span 9;
}
.col-span-8 {
  grid-column: span 8;
}
.col-span-7 {
  grid-column: span 7;
}
.col-span-6 {
  grid-column: span 6;
}
.col-span-5 {
  grid-column: span 5;
}
.col-span-4 {
  grid-column: span 4;
}
.col-span-3 {
  grid-column: span 3;
}
.col-span-2 {
  grid-column: span 2;
}
.col-span-1 {
  grid-column: span 1;
}
@media screen and (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns on medium screens */
  }
}
@media screen and (max-width: 575px) {
  .grid {
    display: block;
  }
}

/* 5-column layout */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0px;
}

.grid-5 .col-span-5, 
.grid-5 .col-span-4, 
.grid-5 .col-span-3, 
.grid-5 .col-span-2, 
.grid-5 .col-span-1 {
  padding: 10px;
}

/*.grid-5 .col-span-5 { grid-column: span 5; }
.grid-5 .col-span-4 { grid-column: span 4; }
.grid-5 .col-span-3 { grid-column: span 3; }
.grid-5 .col-span-2 { grid-column: span 2; }
.grid-5 .col-span-1 { grid-column: span 1; }*/

@media screen and (max-width: 767px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns on medium screens */
  }
}

@media screen and (max-width: 575px) {
  .grid-5 {
    display: block; /* Stack elements on very small screens */
  }
}