html {
    box-sizing: border-box;
}

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

body {
    background-color: #082B59;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    line-height: 2;
  }
  h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
  }
  h1 {
    font-size: 2rem;
    margin-bottom: 0;
  }

  /* layout - mobile first! */

.index,
.products,
.about,
.contact {
    max-width: 1112px;
    margin: 0 auto;
    padding: 3rem 1rem;
}
  /* make images flexible */
  img {
    max-width: 100%;
  }
  a {
    color: #59331d;
  }
  a:hover {
    text-decoration: none;
  }
  header {
    border-bottom: 10px solid #d98555;
  }
  /* navbar styling */
  nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  nav li {
    margin: 0 1rem 1rem 1rem;
    font-size: 1.3rem;
    justify-content: flex-end;
    flex-basis: auto;
    align-items: center;
    text-align: center;
    }

   /* max width on the image in pixels */
  nav .logo img {
    max-width: 150px;
  }
  /* flex basis on the image container, li */
  nav .logo {
    flex-basis: 100%;
    text-align: center;
  }
  nav a {
    color: white;
    text-decoration: none;
    display: block;
  }
  nav a:hover {
    color: #d98555;
  }
  /* establishes a white background */
  .main-bkgd {
    background: #ffffff url(../Media/Images/gulp-bottom-beans.jpg) repeat-x bottom;
    padding-bottom: 300px;
  }
  /* sits inside of the white background, centered */
  .main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
  article {
    flex-basis: 100%;
    padding: 2rem;
  }
  figure {
    border-radius: 10px;
    align-content:stretch;
    background-color: #59331d;
   /* border: 3px solid #ff0000;  */
  }
  figure img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  figcaption {
    color: #f2f2f2;
    padding: 0.5rem;
    text-align:center;
    font-size: 0.7rem;
    background-color: #59331D;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .button {
    display: inline-block;
    background-color: #59331D;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    margin: 1rem 0 1rem 0;
    color: #f2f2f2;
    text-decoration: none;
    border: 3px solid #59331d;
    text-align: center;
  }
  .button:hover {
    background-color: #f2f2f2;
    color: #59331d;
  }
  footer {
    color: #f2f2f2;
    text-align: center;
    border-top: 10px solid #d98555;
  }
  footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  footer a {
    color: #f2f2f2;
    font-size: 2rem;
    display: block;
    margin: 0 1rem 3rem 1rem;
  }

  footer p {
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0;

  }

  .copyright {
    font-size: 0.7rem;
  }

  .address p {
    margin: 0 0 0.3rem 0;  
  }

  .item0 {
    grid-column: 1/4;
    padding: 0 0 2rem 0;
  }

  .item3, .item5, .item7 {
   padding:0 0 1.5rem 0;
   text-align: justify;
  }

  .item3 h3 {
    text-align: left;
   }

  .item3 p {
    margin:0;
   }

   .item5 h3 {
    text-align: left;
   }
   .item5 p {
    margin:0;
   }  
   
   .item7 h3 {
    text-align: left;
   }
  .item7 p {
    margin:0;
   }

   .item2, .item4, .item6 {
    margin:0;
    text-align: justify;
   }

   .item8 p {
    margin:0;
   }


   
      @media (min-width: 500px) {

        nav ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
          }

          /* max width on the image in pixels */
          nav .logo img {
            max-width: 150px;
          }
          /* flex basis on the image container, li */
          nav .logo {
            flex-basis: 100%;
            text-align: center;
          }
          .main {
            margin: 0 auto;
            padding: 2rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            align-items:center;
          }
          article {
            margin:0;
            display: grid;
            padding: 2rem;

          }
          figure {
            margin: 3rem 0 0 0;
            align-items: center;
          }
          figure img {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }

          .item0 {
            grid-column: 1/3;
            padding: 0;
          }      

      }

       
  @media (min-width: 730px) {
    /* rearrange the navigation from centered to left-aligned */

    nav .logo {
        display: grid;
        justify-content: flex-start;
        flex-basis: auto;
        margin-right:auto;
        margin-top: 1rem;
      }
      nav li {
        justify-content: flex-end;
        flex-basis: auto;
        align-items: center;
        margin-top: 3rem;
        text-align: center;
      }

      .main {
        max-width: 1112px;
        margin: 0 auto;
        padding: 2rem;
        display: grid;
        grid-auto-rows:auto;
        grid-template-columns: repeat(6, 1fr);
        gap: 2rem;
        flex-basis: 20%;
     /*    border: 2px solid #ff0000;  */
      }

      .item0 {
        grid-column:1/7;
        padding: 0;
      }

      .item3, .item5, .item7 {
       padding:0;
       }

      .item1, .item9, .item11, .item13 {
        grid-column: 1/4;
      }

      .item2, .item5 {
        grid-column: 1/3;
    }
    .item3, .item6 {
        grid-column: 3/5;
    }
    .item4, .item7 {
        grid-column: 5/7;
    }
    .item10 {
        grid-column: 1/4;
        grid-row: 2/3;
    }
      .item8, .item12, .item14 {
        grid-column: 4/7;
    }
     .item9 {
        grid-column: 4/7;
      }


      article {
        margin:0;
        display: grid;
/*      margin-bottom: 2rem; */
/*      border: 2px solid #ff0000; */
      }

      figure {
        margin: 0;
     /*   flex-basis: 35%; */
        align-items: center;
      }

      figure img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
    }