main:has(.intro-section) {
  margin-top: 0;
}

.intro-section .container {
  background-image:
    var(--primary-image-overlay),
    var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
  margin-top: 1rem;
  padding: 3rem 2rem;

  @media (width >= 56.25rem) {
    padding: 5rem 4rem; 
  }
}

.intro-title {
  max-width: 40rem;
  justify-self: center;
  align-self: center;
}