/* For screen widths between 134px and 1557px (3 columns layout) */
@media (min-width: 134px) and (max-width: 1557px) {
  .custom-grid-layout {
    grid-template-columns: repeat(3, 1fr);  /* 3 columns layout */
    gap: 1.5rem;  /* Optional gap between the columns */
  }
}

/* For screen widths between 1561px and 1793px (3 columns layout) */
@media (min-width: 1561px) and (max-width: 1793px) {
  .custom-grid-layout {
    grid-template-columns: repeat(3, 1fr);  /* 3 columns layout */
    gap: 1.5rem;  /* Optional gap between the columns */
  }
}

/* For screen widths between 1030px and 1358px (3 columns layout) */
@media (min-width: 1030px) and (max-width: 1358px) {
  .custom-grid-layout {
    grid-template-columns: repeat(3, 1fr);  /* 3 columns layout */
    gap: 1.5rem;  /* Optional gap between the columns */
  }
}

/* For screen widths between 892px and 1013px (One column layout) */
@media (min-width: 892px) and (max-width: 1013px) {
  .custom-grid-layout {
    grid-template-columns: 1fr;  /* 1 column layout */
    gap: 1.5rem;  /* Optional gap between the items */
  }
}

/* For screen widths between 1013px and 892px (One column layout) */
@media (min-width: 152px) and (max-width: 1013px) {
    .custom-grid-layout {
      grid-template-columns: 1fr;  /* 1 column layout */
      gap: 1.5rem;  /* Optional gap between the items */
    }
  }
@media (min-width: 130px) and (max-width: 1352px) {
    .custom-grid-layout {
        grid-template-columns: repeat(2, 1fr);  /* 1 column layout */
      gap: 1.5rem;  /* Optional gap between the items */
    }
  }
@media (min-width: 96px) and (max-width: 600px) {
    .custom-grid-layout {
        grid-template-columns: repeat(1, 1fr);  /* 1 column layout */
      gap: 1.5rem;  /* Optional gap between the items */
    }
  }
@media (min-width: 600px) and (max-width: 648px) {
    .custom-grid-layout {
        grid-template-columns: repeat(1, 1fr);  /* 1 column layout */
      gap: 1.5rem;  /* Optional gap between the items */
    }
  }
@media (min-width: 648px) and (max-width: 1000px) {
    .custom-grid-layout {
        grid-template-columns: repeat(2, 1fr);  /* 1 column layout */
      gap: 1.5rem;  /* Optional gap between the items */
    }
  }
@media (min-width: 1280px) and (max-width: 800px) {
    .custom-grid-layout {
        grid-template-columns: repeat(2, 1fr);  /* 1 column layout */
      gap: 1.5rem;  /* Optional gap between the items */
    }
  }