/* Three sections under hero */
.two-col-layout-container {
  padding: var(--padding-main);
}

.two-col-layout-container h2 {
  font-size: 2rem;
}

.two-col-layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

.two-col-layout img {
  width: 100%;
  border-radius: 1rem;
}

@media screen and (min-width: 1200px) {
  .hero-content {
    max-width: var(--max-width-section);
    margin-inline: auto;
    box-sizing: content-box;
  }

  .two-col-layout-container {
    max-width: var(--max-width-section);
    margin-inline: auto;
    box-sizing: content-box;
  }

  .two-col-layout-container h2 {
    text-align: left;
  }

  .two-col-layout {
    display: flex;
    flex-direction: row;
    gap: 4rem;
  }

  .two-col-layout > * {
    flex: 1;
  }

  .two-col-layout img {
    align-self: center;
    max-width: 40%;
  }
}