/*mobile*/
@media (max-width:430px){

    .container {  display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.4fr 1.6fr 1fr 1.2fr 0.8fr;
        gap: 0px 1px;
        grid-auto-flow: row;
        grid-template-areas:
          "menu"
          "content"
          "content"
          "content"
          "footer";
      }
      .menu {  display: grid;
        grid-template-columns: 1.7fr 0.3fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
          "logo ham";
        grid-area: menu;
      }
      .logo { grid-area: logo; }
      .nav{
        display: none;
      }
      .ham { grid-area: ham; }
      .content {  display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
          "item-1 item-1"
          "item-2 item-2"
          "item-3 item-3";
        grid-area: content;
      }
      .content h1{
        display: flex;
        align-items: center;
        justify-content: center;
      }
        .menu .logo img{
            width: 100px;
            height: 80px;
            display: inline-block;
            align-self: initial;
        }
      .item-1 { grid-area: item-1; }
      .item-2 { grid-area: item-2; }
      .item-3 { grid-area: item-3; }
      .footer {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        gap: 0px 0px;
        grid-template-areas:
          "info"
          "copy"
          "social";
        grid-area: footer;
      }
      .footer h1{
        font: Roboto;
        font-size: 8px;
        font-weight: normal;
      }
      .footer p{
        padding-left: 25px;
        font: Roboto;
        font-size: 12px;}
      .info { grid-area: info;}
      .copy { grid-area: copy; }
      .copy h2{
        display: flex;;
        justify-content: left;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
        padding-left: 25px;
      }
      .social { grid-area: social;
        display: flex;;
        justify-content: left;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
        padding-left: 25px;}
}