:root {
  --ipro-grid-cols: 4;
  --ipro-grid-gutter: 16px;
  --ipro-grid-margin: 16px;
  --ipro-grid-max: 1280px;
}
@media (min-width: 640px) {
  :root {
    --ipro-grid-cols: 8;
    --ipro-grid-gutter: 24px;
    --ipro-grid-margin: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --ipro-grid-cols: 12;
    --ipro-grid-gutter: 32px;
    --ipro-grid-margin: 32px;
  }
}
.ipro-container {
  width: 100%;
  max-width: var(--ipro-grid-max);
  margin-inline: auto;
  padding-inline: var(--ipro-grid-margin);
}
.ipro-grid {
  display: grid;
  grid-template-columns: repeat(var(--ipro-grid-cols), minmax(0, 1fr));
  gap: var(--ipro-grid-gutter);
}
.ipro-col-1  { grid-column: span 1; }
.ipro-col-2  { grid-column: span 2; }
.ipro-col-3  { grid-column: span 3; }
.ipro-col-4  { grid-column: span 4; }
.ipro-col-6  { grid-column: span 6; }
.ipro-col-8  { grid-column: span 8; }
.ipro-col-12 { grid-column: span 12; }
@media (max-width: 639.98px) {
  .ipro-col-12, .ipro-col-8, .ipro-col-6 { grid-column: 1 / -1; }
}