body.recipe {
  main {
    .content {
      width: 100%;
      max-width: 1020px;
      >p {
        width: 830px;
        margin: 0 auto;
        @media only screen and (max-width: 800px) {
          width: auto;
        }
      }
      center {
        margin-top: 50px;
        margin-bottom: 65px;
      }
      .recipes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-gap: 20px;
        max-width: 1320px;
        margin: 0 auto;
        @media only screen and (max-width: 800px) {
          display: block;
        }
        article {
          background: white;
          padding: 20px;
          display: flex;
          flex-flow: column nowrap;
          @media only screen and (max-width: 800px) {
            &:not(:last-child) {
              margin-bottom: 15px;
            }
          }
          .img {
            img {
              width: 100%;
              height: auto;
            }
          }
          h3 {
            font-size: 17px;
            line-height: 25px;
            letter-spacing: 0.04em;
            margin: 13px 0;
            @media only screen and (max-width: 800px) {
              font-size: 14px;
              margin-bottom: 7px;
            }
          }
          .teacher {
            display: -webkit-flex;
            -webkit-align-items: center;
            display: flex;
            align-items: center;
            margin-top: auto;
            margin-bottom: 22px;
            @media only screen and (max-width: 800px) {
              margin-bottom: 15px;
            }
            img {
              height: 50px;
              width: auto;
              float: left;
              @media only screen and (max-width: 800px) {
                height: 45px;
              }
            }
            h4 {
              float: left;
              margin-left: 14px;
              font-size: 14px;
              line-height: 20px;
              letter-spacing: 0.05em;
              @media only screen and (max-width: 800px) {
                font-size: 11px;
                line-height: 18px;
              }
            }
          }
          >a {
            display: block;
            padding: 19px 21px;
            font-size: 13px;
            letter-spacing: 0em;
            @media only screen and (max-width: 800px) {
              font-size: 11px;
              padding: 17px 18px;
            }
            &.recipe {
              background: var(--black);
              color: white;
              margin-bottom: 1px;
            }
            &.report {
              background: #535353;
              color: #E0E0E0;
            }
          }
        }
      }
    }
  }
}