@layer modules {
  .benchmarks-cta {
    padding: 2rem clamp(15px, 15vw - 45px, 45px);
    margin: 2rem clamp(-30px, 60vw - 480px, 0px);
    border-radius: clamp(0px, 40vw - 300px, 20px);
    background-image: linear-gradient(150deg,
      #a1fff5 10%,
      #ffefca 80%
    );
    text-align: center;
    p {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 700;
    }
    a {
      display: block;
      width: fit-content;
      padding: .8rem 1.4rem;
      margin: 1.5rem auto 0;
      color: white;
      background-color: #118479;
      font-size: 1rem;
      font-weight: 700;
      border-radius: .4rem;
      text-decoration: none;
      transition: opacity .2s;
      &:hover { opacity: .8; }
    }

    @media(width > 500px){
      text-align: left;
      display: grid;
      grid: auto auto / 1fr auto;
      gap: 2rem;
      a { margin: 0; }
      img {
        grid-area: 1 / 2 / -1 / -1;
        width: auto;
        margin: -2rem -2rem -2rem 2rem;
        height: 12rem;
        place-self: center;
      }
    }
    @media(width < 500px){
      img { display: none; }
    }
  }
}
