.wp-block-table {
  table {
    /* Clear all default borders, and set em later. */
    * {
      border: unset;
    }

    /* Make links look like buttons */
    a {
      all: unset;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;

      display: inline-flex;
      padding: 2.5px 14px 1.5px 14px;
      align-items: center;
      gap: 6px;

      border-radius: 100px;
      border: 1px solid #9D9D9C;

      transition: background-color 150ms ease-in-out, 
                  border-color 150ms ease-in-out,
                  color 150ms ease-in-out;

      /* Shadow/xs */
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

      color: var(--Sort-90, #353535);

      /* PXS */
      font-family: "Suisse Intl";
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%; /* 22.4px */
      letter-spacing: 0.8px;
      text-transform: uppercase;

      &::after {
        content: '';
        display: inline-block;
        width: 9px;
        height: 8px;
        background-image: url("data:image/svg+xml;utf8,<svg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4H8M8 4L4.5 0.5M8 4L4.5 7.5' stroke='%23353535' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
      }

      &:hover {
        color: #353535;
        border-color: #9BD2AF;
        background-color: #9BD2AF;

        &::after {
          filter: brightness(0) invert(0);
        }
      }
    }

    thead tr th {
      color: #6E6E6E;
      font-family: "IBM Plex Mono";
      font-size: 14px;
      font-style: italic;
      font-weight: 400;
      line-height: 120%; /* 16.8px */
      padding: 16px 0;
    }

    tbody tr,
    thead tr {
      border-bottom: 1px dashed #6E6E6E !important;
    }

    tbody tr {
      td {
        color: #6E6E6E;
        font-family: "Suisse Intl";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
        padding: 16px 0;
        
        &:first-child {
          color: #353535;
          font-family: "Suisse Intl";
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
        }
      }
    }
  }


  .mobile-table {
    display: none;

    .row {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 8px;

      &:first-child {
        border-top: 1px dashed #6E6E6E;
      }
      padding: 16px 0;
      border-bottom: 1px dashed #6E6E6E;

      .cell {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: start;

        .title {
          grid-column: 1 / 2;
          color: var(--Sort-70, #6E6E6E);
          font-family: "IBM Plex Mono";
          font-size: 12px;
          font-style: italic;
          font-weight: 400;
          line-height: 120%; /* 14.4px */
          margin: 0;
          padding-top: 5px;
        }

        .content {
          grid-column: 2 / 4;
          color: #6E6E6E;

          font-family: "Suisse Intl";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%; /* 24px */

          margin: 0;
        }

        &:first-child {
          .content {
            font-weight: 500;
            color: #353535;
          }
        }
      }
    }
  }

  @media (max-width: 770px) {
    table {
      display: none;
    }
    .mobile-table {
      display: grid;
    }
  }
}