/* CTA Grid styles */

.cta-grid-wrapper {
  position: relative;

  .shape {
    position: absolute;
    z-index: -1;
    bottom: calc(100% - 1px); left: 50%;
    width: 100%;
    min-width: 100vw;
    max-height: 14rem;
    background-color: var(--wp--preset--color--bg-02);
    aspect-ratio: 10;
    transform: translateX(-50%);
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0% 100%);


    &.bottom {
      top: calc(100% - 1px);
      bottom: auto;
      transform: translateX(-50%) rotate(180deg);
    }
  }
  

  .cta-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;

    .link-card-wrapper {
      width: 100%;
    }
  }

  @media (min-width: 40rem) {
    .cta-grid {
      .link-card-wrapper {
        width: calc(50% - 1rem);
      }
    }
  }

  @media (min-width: 75rem) {
    .cta-grid {
      .link-card-wrapper {
        width: calc(33.333333% - 1.333333333rem);
      }
    }
  }

  @media (min-width: 90rem) {
    .cta-grid {
      gap: 4rem;

      .link-card-wrapper {
        width: calc(33.333333% - 2.666666667rem);
      }
    }
  }
}