/* GRIDS
--------------------------- */
:root {
  --grid-row-gap: 20px;
  --grid-column-gap: 2%;
}

[data-zc-grid] { display:grid; grid-column-gap: var(--grid-column-gap); grid-row-gap:var(--grid-row-gap); }
[data-zc-grid~="no-col-gap"] { grid-column-gap:0; }
[data-zc-grid~="no-row-gap"] { grid-row-gap:0; }
[data-zc-grid] > * { margin-bottom:0 !important; }

/* Set all child columns (mobile+) */
[data-zc-grid~="2-1"] { grid-template-columns: 2fr 1fr; }
[data-zc-grid~="100%"] { grid-template-columns: repeat(1, 1fr); }
[data-zc-grid~="1of2"] { grid-template-columns: repeat(2, 1fr); }
[data-zc-grid~="1of3"] { grid-template-columns: repeat(3, 1fr); }
[data-zc-grid~="1of4"] { grid-template-columns: repeat(4, 1fr); }
[data-zc-grid~="1of5"] { grid-template-columns: repeat(5, 1fr); }
[data-zc-grid~="1of6"] { grid-template-columns: repeat(6, 1fr); }
[data-zc-grid~="1of7"] { grid-template-columns: repeat(7, 1fr); }


/* MEDIA QUERIES (MIN)
---------------------------------------------- */

/* MOBILE:MEDIUM */
@media screen and (min-width:450px) {
  [data-zc-grid~="mobileM-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="mobileM-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="mobileM-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="mobileM-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="mobileM-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="mobileM-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="mobileM-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="mobileM-1of7"] { grid-template-columns: repeat(7, 1fr); }
}

/* MOBILE:LARGE */
@media screen and (min-width:650px) {
  [data-zc-grid~="mobileL-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="mobileL-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="mobileL-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="mobileL-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="mobileL-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="mobileL-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="mobileL-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="mobileL-1of7"] { grid-template-columns: repeat(7, 1fr); }
}

/* TABLET:PORTRAIT */
@media screen and (min-width:768px) {
  [data-zc-grid~="tabletP-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="tabletP-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="tabletP-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="tabletP-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="tabletP-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="tabletP-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="tabletP-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="tabletP-1of7"] { grid-template-columns: repeat(7, 1fr); }
}

/* TABLET:LANDSCAPE */
@media screen and (min-width:1024px) {
  [data-zc-grid~="tabletL-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="tabletL-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="tabletL-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="tabletL-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="tabletL-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="tabletL-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="tabletL-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="tabletL-1of7"] { grid-template-columns: repeat(7, 1fr); }
}

/* DESKTOP */
@media screen and (min-width:1300px) {
  [data-zc-grid~="desktop-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="desktop-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="desktop-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="desktop-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="desktop-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="desktop-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="desktop-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="desktop-1of7"] { grid-template-columns: repeat(7, 1fr); }
}

/* DESKTOP MED */
@media screen and (min-width:1450px) {
  [data-zc-grid~="desktopM-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="desktopM-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="desktopM-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="desktopM-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="desktopM-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="desktopM-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="desktopM-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="desktop-1of7"] { grid-template-columns: repeat(8, 1fr); }
}

/* DESKTOP MAX */
@media screen and (min-width:1650px) {
  [data-zc-grid~="desktopL-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="desktopL-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="desktopL-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="desktopL-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="desktopL-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="desktopL-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="desktopL-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="desktop-1of7"] { grid-template-columns: repeat(9, 1fr); }
}


/* MEDIA QUERIES (MAX)
---------------------------------------------- */

/* MOBILE (Only) */
@media screen and (max-width:767px) {
  [data-zc-grid~="mobile-only-2-1"] { grid-template-columns: 2fr 1fr; }
  [data-zc-grid~="mobile-only-100%"] { grid-template-columns: repeat(1, 1fr); }
  [data-zc-grid~="mobile-only-1of2"] { grid-template-columns: repeat(2, 1fr); }
  [data-zc-grid~="mobile-only-1of3"] { grid-template-columns: repeat(3, 1fr); }
  [data-zc-grid~="mobile-only-1of4"] { grid-template-columns: repeat(4, 1fr); }
  [data-zc-grid~="mobile-only-1of5"] { grid-template-columns: repeat(5, 1fr); }
  [data-zc-grid~="mobile-only-1of6"] { grid-template-columns: repeat(6, 1fr); }
  [data-zc-grid~="mobile-only-1of7"] { grid-template-columns: repeat(7, 1fr); }
}