.tabs {
  padding: 32px 32px 40px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(24, 24, 28, 0.06),
    0 0 3px 0 rgba(24, 24, 28, 0.07);

  @media screen and (max-width: 768px) {
    padding: 20px 16px 24px;
    row-gap: 20px;
  }

  & .tabs__tab-list {
    display: flex;
    column-gap: 6px;
    border-bottom: 1px solid #cbd6e2;

    & .tabs__tab {
      position: relative;
      flex: 1;

      padding-bottom: 16px;
      display: flex;
      justify-content: center;
      transition: opacity 0.2s;

      &[aria-selected="false"]:hover {
        opacity: 0.8;
      }

      & .tabs__tab-text {
        font-size: 1.125rem;
        line-height: 1.5;
        text-align: center;
        color: #737373;
        font-weight: 500;
        word-break: keep-all;

        @media screen and (max-width: 768px) {
          font-size: 1rem;
          line-height: 1.4;
        }
      }

      &[aria-selected="true"] {
        & .tabs__tab-text {
          color: #2ba6e4;
          font-weight: bold;
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: -1px;
          height: 2px;
          background-color: #2ba6e4;
        }
      }
    }
  }

  & .tabs__panel[hidden="until-found"] {
    display: none;
  }
}