:root{
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
}
/* Masonry Layout */
.masonry-2,
.masonry-3 {
  column-gap: 1em;
}
.masonry-2 > *,
.masonry-3 > * {
  display: inline-block;
  break-inside: avoid;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 1em;
}

/* Grid Layout */
.grid-2,
.grid-2-fixed,
.grid-3,
.grid-3-fixed,
.grid-4,
.grid-4-fixed,
.grid-5,
.grid-6,
.grid-n, .grid-2-on-mobile, .grid-1-2, .grid-1-3, .grid-2-1, .grid-2-3, .grid-3-1, .grid-3-2 {
  --grid-gap: 1rem;
  display: grid;
  align-content: stretch;
  justify-content: space-evenly;
  align-items: stretch;
  justify-items: stretch;
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
}

.grid-2,
.grid-2-fixed {
  grid-template-columns: var(--grid-2);
}

.grid-3,
.grid-3-fixed {
  grid-template-columns: var(--grid-3);
}

.grid-4,
.grid-4-fixed {
  grid-template-columns: var(--grid-4);
}

.grid-5, .grid-5-fixed {
  grid-template-columns: var(--grid-5);
}

.grid-6, .grid-6-fixed {
  grid-template-columns: var(--grid-6);
}

.grid-n {
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
}
.grid-1-2 {
  grid-template-columns: var(--grid-1-2);
}

.grid-1-3 {
  grid-template-columns: var(--grid-1-3);
}

.grid-2-1 {
  grid-template-columns: var(--grid-2-1);
}

.grid-2-3 {
  grid-template-columns: var(--grid-2-3);
}

.grid-3-1 {
  grid-template-columns: var(--grid-3-1);
}

.grid-3-2 {
  grid-template-columns: var(--grid-3-2);
}

@media (max-width: 768px) {
.masonry-2-on-mobile {
    column-count: 2;
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .grid-5,
  .grid-6,
  .grid-2-on-mobile {
    grid-template-columns: var(--grid-2);
  }
  .grid-3-on-mobile{
    grid-template-columns: var(--grid-3);
  }
}
@media (min-width: 768px) {
  .masonry-2 {
    column-count: 2;
  }
  
  .masonry-3 {
    column-count: 2;
  }
  
  .two-column {
    column-count: 2;
    column-gap: 2.5rem;
  }
  
  .three-column {
    column-count: 3;
    column-gap: 2.5rem;
  }
}

@media (min-width: 1366px) {
  .masonry-3 {
    column-count: 3;
  }
}