.hero {
  padding-bottom: var(--space-xxl);
  padding-top: var(--space-xxl);
  overflow: hidden;
  position: relative;
  display: flex;
  height: auto;

  .container {
    @media (min-width: 0) {
      .grid {
        align-items: center;
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (min-width: 40rem) {
      .grid {
        grid-template-columns: repeat(8, 1fr);
      }
    }

    @media (min-width: 64rem) {
      .grid {
        grid-template-columns: repeat(12, 1fr);
      }
    }

    .grid {
      column-gap: var(--gutter);
      display: grid;
      row-gap: 0px;
    }
  }

  &::after {
    background: conic-gradient(from 90deg at 50% 50%, var(--color-pastel-green-400), var(--color-white));
    content: "";
    filter: blur(146px) brightness(138%) opacity(40%);
    position: absolute;
    inset: 0px;
    z-index: -1;
  }
}

@media (min-width: 0) {
  .hero {
    align-items: center;
  }
}

@media (min-width: 40rem) {
  .hero {
    min-height: calc(-132px + 100svh);
  }
}

section.problem-statement {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, var(--color-downriver-400) 0);

  .grid {
    color: var(--color-white);
    column-gap: var(--gutter);
    display: grid;
    row-gap: 0px;

    background-color: var(--color-downriver-400);
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    padding-bottom: var(--space-xxl);
    padding-top: var(--space-xxl);

    .col {
      padding-left: var(--gutter);
      z-index: 2;

      :not(:last-child) {
        margin-bottom: var(--baseline);
      }

      div {
        color: var(--color-pastel-green-400);
      }

      >.button {
        color: var(--color-white);
        border: 1px solid var(--color-white);
      }
    }

    @media (min-width: 0) {
      .col {
        grid-column: span 4;
      }
    }

    @media (min-width: 40rem) {
      .col {
        grid-column: 2 / span 6;
      }
    }

    @media (min-width: 64rem) {
      .col {
        grid-column: 3 / span 8;
      }
    }
  }

  @media (min-width: 0) {
    .grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 40rem) {
    .grid {
      grid-template-columns: repeat(8, 1fr);
    }
  }

  @media (min-width: 64rem) {
    .grid {
      grid-template-columns: repeat(12, 1fr);
    }
  }
}