Add new accessible Pricing Tables component

[markteekman]

Example:

.pricing-tables {
  &__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-block-end: var(--spacing-6);
   text-align: center;

   @include breakpoint(medium) {
    h2 {
     max-inline-size: 20ch;
    }
   }
  }

  &__tables {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-6);

   @include breakpoint(medium) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   @include breakpoint(large) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
  }

  &__table {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-5);
   padding: var(--spacing-7) var(--spacing-6);
   border: 1px solid var(--neutral-light-grey);
   border-radius: calc(var(--border-radius) * 2);

   &.recommended {
    background-color: var(--primary-300);
    border: 2px solid var(--primary-200);
   }

   &-recommended {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    padding: var(--spacing-3);
    font-weight: bold;
    background-color: var(--primary-200);
    border-radius: 0 calc(var(--border-radius) * 1.75) 0 calc(var(--border-radius) * 1.75);
   }

   &-price {
    font-size: var(--font-size-h3);
    font-weight: bold;

    span {
     font-size: var(--font-size-body);
     font-weight: normal;
    }
   }
  }

  &__table-features {
   padding-inline-start: 0;
   list-style-position: inside;

   li {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) 0;
    border-top: 1px solid #b6e7ec;

    &::before {
     content: url('../../../svg/icon-checkmark-green.svg');
     position: static;
     display: block;
     block-size: 40px;
     inline-size: 40px;
    }
   }
  }

  a {
   align-self: center;
   text-align: center;
  }

  .button {
   inline-size: 100%;
  }
}