.calendar-table {
  display: grid;
  height: auto;
  padding: 0;
  margin: 0;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  & > * {
    display: flex;
    flex-direction: column;
  }

  &.calendar-5 > tbody > tr {
    grid-template-columns: repeat(5, 1fr);
  }

  & > tbody {
    display: flex;
    flex-direction: column;

    & > tr {
      display: grid;
      // grid-template-columns: repeat(5, 1fr);
      height: auto;

      &:has(> .menudate-header) {
        grid-template-columns: 1fr;
        width: 100%;
      }

      & > td {
        margin: 0;
        border: solid 1px #c8c6c6;
        padding: 5px;
      }
    }
  }

  & > tablet tr {
    display: grid;
    background: cyan;
  }

  .menu-title {
    margin-top: 5px;
  }

  @media only screen and (max-width: 600px) {
    background: rgb(0, 255, 4);
    &.calendar-5 > tbody > tr {
      grid-template-columns: 1fr;
    }
  }
}