#whatis {
  display: grid;
  position: relative;
  margin-top: -4px;

  .hider {
    width: 100vw;
    height: .25rem;
    background-color: var(--background);
    z-index: 10;
    top: -0.25rem;
    left: 0;
    position: absolute;
  }
  
  background-color: var(--background);
  color: black;

  border-bottom-right-radius: var(--large-border-radius);
  border-bottom-left-radius: var(--large-border-radius);
  text-align: center;
  box-shadow: 0px 2px 4px 0px #aaaaaa;

  .border svg {
    z-index: -1;
    position: absolute;
    top: -10rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: auto;

    @media screen and (min-width: 1980px) {
      transform: scaleY(0.6);
    }

    @media screen and (max-width: 1350px) {
      top: -6rem;
    }

    @media screen and (max-width: 940px) {
      top: -4rem;
    }

    filter: drop-shadow(0px -2px 4px #00000040);
  }

  .container {
    position: relative;
    top: 10rem;
    padding-top: 3rem;

    .whatis__heading {
      margin-top: -10rem;
      margin-bottom: 2rem;
    }

    @media screen and (max-width: 1080px) {
      padding-bottom: 12rem;
    }

    h4 {
      font-weight: 200;
      margin-top: 0;

      b {
        font-weight: 500;
      }
    }

    p {
      font-weight: 300;
      font-size: 1.5rem;
    }

    button {
      font-weight: 200;
      padding: .75rem 2rem;

      b {
        font-weight: 400;
      }
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      
      @media screen and (max-width: 920px) {
        grid-template-columns: 1fr;
        padding-bottom: 2.5rem;
      }
      
      .card {
        gap: 1.5rem;
        align-items: flex-start;
        display: grid;
        text-align: left;
        border-radius: var(--small-border-radius);
        background-color: white;
        box-shadow: 0px 2px 4px 0px #aaaaaa;
        padding: 2rem;
        border: none;
        color: black;

        &:nth-child(2) {
          background-color: var(--primary);
          color: white;
        }

        img {
          height: 70px;
        }

        h4 {
          font-size: 2rem;
          font-weight: 200;
          margin: 0;

          b {
            font-weight: 400;
          }
        }

        h5 {
          font-weight: 200;
          font-size: 1rem;
          margin: 0;
        }

        @media screen and (max-width: 1080px) {
          grid-template-columns: auto 1fr;
          justify-self: center;
          max-width: 500px;
          padding: 1.5rem;

          img {
            height: 50px;
          }
          
          h5 {
            padding-left: 1.25rem;
            grid-column: span 2;
          }
        }
      }
    }
  }
}