@import url('/styles/subscribe.css');

.tableContentBox {
  @media (width <= 480px) {
    overflow: scroll;
    width: 100%;
  }

  table {
    border: 2px solid var(--divider-gray);
    border-collapse: collapse;

    @media (width <= 480px) {
      width: 700px;
    }

    thead {
      tr {
        th {
          vertical-align: middle;
          border-bottom: 2px solid var(--divider-gray);
          border-right: 2px solid var(--divider-gray);
          padding: var(--space-15px);
          font-size: var(--subscription-font-3-desc);
          background: var(--surface-light);

          @media (width <= 992px) {
            padding: var(--space-12px);
          }

          &:first-child {
            width: 22%;
          }

          &:last-child {
            border-right: 0;
          }
        }
      }
    }

    tbody {
      tr {
        td {
          border-bottom: 2px solid var(--divider-gray);
          border-right: 2px solid var(--divider-gray);
          padding: var(--space-15px);
          font-size: var(--subscription-font-3-desc);
          line-height: var(--subscription-lh-7-desc-display);

          @media (width <= 992px) {
            padding: var(--space-12px);
          }

          @media (width <= 767px) {
            font-size: var(--heading-font-20-mob-text);
          }

          &:last-child {
            border-right: 0;
          }
        }
        
        &:last-child {
          td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}