.hero-wrapper {
  padding-top: var(--space-xl);
}

.main-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

@media (min-width: 1025px) {
  .main-layout {
    grid-template-columns: 2fr 1fr;
  }
}