/* Grid Masonry 01 (tokens-first)
   - Pure CSS columns.
*/

.oic-grid--masonry-01{
  --oic-grid-gap: var(--oic-space-4, 16px);
  --oic-grid-cols-mob: 1;
  --oic-grid-cols-tab: 2;
  --oic-grid-cols-desk: 3;
  column-count: var(--oic-grid-cols-mob);
  column-gap: var(--oic-grid-gap);
}

.oic-grid--masonry-01 .oic-grid__item{
  break-inside: avoid;
  margin: 0 0 var(--oic-grid-gap) 0;
}

@media (min-width: 720px){
  .oic-grid--masonry-01{ column-count: var(--oic-grid-cols-tab); }
}

@media (min-width: 1024px){
  .oic-grid--masonry-01{ column-count: var(--oic-grid-cols-desk); }
}

.oic-grid--masonry-01 .oic-cardpack{ width:100%; }