/* === Responsive Helpers === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; line-height: 1.6; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.grid { display: grid; gap: 1rem; }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .col-4 { grid-template-columns: repeat(2, 1fr); }
  .col-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .col-2, .col-3, .col-4 { grid-template-columns: 1fr; }
  .hide-on-mobile { display: none !important; }
}
.responsive-iframe { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.responsive-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }