@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-family: "Open Sans", sans-serif;
    background: hsl(210, 36%, 96%);
    color: hsl(209, 61%, 16%);
    line-height: 1.5;
    font-size: 0.875rem;
  }
  ul {
    list-style-type: none;
  }
  a {
    text-decoration: none;
  }
  img:not(.logo) {
    width: 100%;
  }
 
    h2,
    h4 {
      letter-spacing: 0.1rem;
      text-transform: capitalize;
      line-height: 1.25;
      margin-bottom: 0.75rem;
      font-family:"Roboto", sans-serif;
    }
    h2 {
      font-size: 2rem;
    }
    h4 {
      font-size: 0.875rem;
    }
    p {
      margin-bottom: 1.25rem;
      color:  hsl(210, 22%, 49%);
    }
    @media screen and (min-width: 800px) {
        h1 {
          font-size: 4rem;
        }
        h2 {
          font-size: 2.5rem;
        }
        h3 {
          font-size: 1.75rem;
        }
        h4 {
          font-size: 1rem;
        }
        body {
          font-size: 1rem;
        }
        h1,
        h2,
        h3,
        h4 {
          line-height: 1;
        }
      }
      .btn:hover {
        color: #fff;
        background: #222;
      }
      .section{
          padding:5rem 0;
      }
      main {
        min-height: 100vh;
        display: grid;
        place-items: center;
      }
      .menu{
          padding:5rem 0;
      }
      .title{
          text-align: center;
          margin-bottom: 2rem;
      }
      .underline{
          height:0.25rem;
          width:5rem;
          background: #ed7d46;
          margin-left: auto;
          margin-right: auto;
      }
      .btn-container{
          margin-bottom: 4rem;
          display: flex;
          justify-content: center;
      }
      .filter-btn{
            background: transparent;
            border-color: #ed7d46;
            font-size: 1rem;
            text-transform: capitalize;
            margin: 0 0.5rem;
            letter-spacing: 1px;
            border-radius: 0.25rem;
            padding: 0.375rem 0.75rem;
            color: #222;
            cursor: pointer;
            transition: all 0.3s linear;
      }
      .filter-btn:hover {
        background:#ed7d46;
        color: #fff;
      }
      .section-center{
          width:90vw;
          margin:0 auto;
          max-width: 1170px;
          display: grid;
          gap: 3rem 2rem;
          justify-items: center;
      }
      .menu-item{
          display:grid;
          gap:1rem 2rem;
          max-width: 25rem;
      }
      .photo{
          object-fit:cover;
          height:200px;
          border: 0.25rem solid #ed7d46;
          border-radius: 0.25rem;
      }
      .item-info header{
          display:flex;
          justify-content: space-between;
          border-bottom: 0.5px dotted hsl(210, 22%, 49%);
      }
      .item-info h4{
          margin-bottom: 0.5rem;
      }
      .price{
          color:#ed7d46;
      }
      .item-text{
          margin-bottom:0;
          padding-top: 1rem;
      }
     @media screen and (min-width: 768px) {
        .menu-item {
            grid-template-columns: 225px 1fr;
            gap: 0 1.25rem;
            max-width: 40rem;
        }       
        .photo {
          height: 175px;
        }
      }
      @media screen and (min-width: 1200px) {
        .section-center {
          width: 100vw;
          grid-template-columns: 1fr 1fr;
        }
        .photo {
          height: 150px;
        }
      }