.modes-page{}

.modes-hero-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--space-6);
  align-items:center;
}

.modes-hero-text{
  grid-column:span 5;
  max-width:600px;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}

.modes-hero-visual{
  grid-column:span 7;
}

.modes-hero-visual img{
  width:100%;
  border-radius:var(--radius-lg);
}

.center{text-align:center;margin-inline:auto;}

.modes-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-5);
}

.mode-card{display:flex;flex-direction:column;gap:var(--space-2);text-align:center;}

.modes-split-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6);
  align-items:center;
}

.modes-split-text{display:flex;flex-direction:column;gap:var(--space-3);max-width:700px;}

.modes-split-image img{width:100%;border-radius:var(--radius-lg);}

.reverse .modes-split-grid{direction:rtl;}
.reverse .modes-split-text{direction:ltr;}

.modes-guide .guide-box{
  max-width:700px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  text-align:center;
}

.modes-cta .cta-box{
  max-width:600px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  align-items:center;
  text-align:center;
}

@media(max-width:1024px){
  .modes-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .modes-hero-grid{grid-template-columns:1fr;}
  .modes-hero-text,.modes-hero-visual{grid-column:auto;}
  .modes-split-grid{grid-template-columns:1fr;}
  .reverse .modes-split-grid{direction:ltr;}
}

@media(max-width:600px){
  .modes-grid{grid-template-columns:1fr;}
}