.container, .section.container {
  max-width:1100px;
  margin:0 auto;
  padding:clamp(24px,3vw,48px) 20px;
}
.grid {
  display: grid;
  gap: var(--spacing-lg);
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.section {
  padding: var(--spacing-lg) 0;
}
.hero {position:relative; min-height:60vh; color:#fff;}
.hero .content{position:relative; z-index:1; text-align:center; padding:clamp(24px,3vw,48px) 0;}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; background:#000;}

.video-wrap{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:16px;}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%;}