.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-gap: 10px 0;
    grid-template-areas:
    "title title title title title title"
    "banner banner banner banner banner banner"
    "img1 article1 article1 article1 article1 article1"
    "article2 article2 article2 article2 article2 article2"
    "article3 article3 article3 article3 article3 article3"
    "images images images images images images"
    "footer footer footer footer footer footer"
}
.img1  {
    display: grid;
    grid-column: 1/2;
    grid-row: 3/4;
    grid-area: img1;
    align-items: center;
    justify-content: center;
}
.article1  {
    display: grid;
    grid-column: 2/7;
    grid-row: 3/4;
    grid-area: article1;
}
.p1  {
    font-size: 1.2rem;
    font-weight: 300;
    padding: 15px;
    margin: auto;
}
.article2  {
    display: grid;
    grid-column: 1/7;
    grid-row: 4/5;
    grid-area: article2;
}
.p3  {
    font-size: 1.2rem;
    font-weight: 300;
    padding: 0 15px 15px 15px;
}
.article3  {
    display: grid;
    grid-column: 1/7;
    grid-row: 5/6;
    grid-area: article3;
    background-color: #bbb;
    margin: auto;
    width: 80%;
    border: 1px solid black;
}
h1  {
    font-size: 2rem;
    font-weight: bold;
    margin: auto;
    text-decoration: none;
    padding: 20px 0;
    color: #000;
}
.article3 a {
    text-decoration: none;
}
.p4  {
    font-size: 1.2rem;
    font-weight: 600;
    margin: auto;
    padding: 5px 15px;
}
.p2  {
    font-size: 1.2rem;
    font-weight: 600;
    margin: auto;
    padding: 5px 50px;

}
.gallery  {
    display: grid;
    grid-column: 1/7;
    grid-row: repeat 6/7;
    grid-area: images;
    background-color: #999;
    align-items: center;
    justify-content: center;
}
.imgs  {
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}
.responsive2  {
    width: 20%;
    height: auto;
    margin: 0 auto;
    padding: 10px 20px;
}
.footer  {
    display: grid;
    grid-column: 1/7;
    grid-row: 7/8;
    grid-area: footer;
}
.bottom  {
    color: #fff;
    background-color: #222;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 1.5rem;
    width: 100%;
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
body  {
    width: 100vh;
    height: 100vh;
    margin: 0 auto;
    font-family: times, helvetica;
    padding: 0;
    color: #000;
    background-color: #eee;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.banner  {
    grid-area: banner;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.title  {
    grid-area: title;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article1  {
    grid-area: article1;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article2  {
    grid-area: article2;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article3  {
    grid-area: article3;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.images  {
    grid-area: images;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.footer  {
    grid-area: footer;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 10px;
  width: 50%;
  height: 40%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu > div {
  background-color: #444;
  border-radius: 20%;
  width: 87vw;
  height: 100vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.3s ease;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.menu-wrap .menu > div > div {
  text-align: right;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.grid  {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
    grid-template-areas:
    "title"
    "banner"
    "img1"
    "article1"
    "article2"
    "article3"
    "images"
    "footer";
    width: 100%;
    height: auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.title  {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-area: title;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #afafb5;
    padding: 20px 10px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
#fs1  {
    font-size: 1rem;
    color: #222;
    padding-top: 10px;
    margin: auto;
    font-weight: bold;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.highlight  {
    font-size: 1.3rem;
    font-weight: bold;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.img1  {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    grid-area: img1;
    align-items: center;
    justify-content: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article1  {
    display: grid;
    grid-column: 1;
    grid-row: 4;
    grid-area: article1;
    padding: 15px 10px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.p1  {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 15px 0 0 0;
    margin: auto;
    text-indent: 30px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article2  {
    display: grid;
    grid-column: 1;
    grid-row: 5;
    grid-area: article2;
    padding: 15px 10px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.p3  {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 10px 0 0 0;
    margin: auto;
    text-indent: 30px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.article3  {
    display: grid;
    grid-column: 1;
    grid-row: 6;
    grid-area: article3;
    background-color: #aaa;
    padding: 20px 0;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.p4  {
    font-size: 1.1rem;
    font-weight: 600;
    margin: auto;
    padding: 5px 15px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
h1  {
    font-size: 1.5rem;
    font-weight: bold;
    margin: auto;
    padding: 20px 0;
    color: #000;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.p2  {
    font-size: 1.2rem;
    font-weight: 600;
    margin: auto;
    padding: 5px 50px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.gallery  {
    display: grid;
    grid-column: 1;
    grid-row: 7;
    grid-area: images;
    background-color: #aaa;
    align-items: center;
    justify-content: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.imgs  {
    margin: 0 auto;
    padding: 10px 0px;
    text-align: center;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.responsive2  {
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 10px 20px;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.footer  {
    display: grid;
    grid-column: 1;
    grid-row: 8;
    grid-area: footer;
}
}
@media only screen and (min-width: 320px) and (max-width: 414px) {
.bottom  {
    color: #fff;
    background-color: #222;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 1.2rem;
    width: 100%;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 40px;
  width: 25%;
  height: 30%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.title  {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-area: title;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #afafb5;
    padding: 20px 10px;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.highlight  {
    font-size: 1.9rem;
    font-weight: bold;
    padding: 5px 20px;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
#fs1  {
    font-size: 1.4rem;
    color: #222;
    padding: 20px 22px;
    font-weight: bold;
    text-align: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.gallery  {
    display: grid;
    grid-column: 1;
    grid-row: 7;
    grid-area: images;
    background-color: #aaa;
    align-items: center;
    justify-content: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.imgs  {
    margin: 0 auto;
    padding: 10px 0px;
    text-align: center;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.responsive2  {
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 10px 20px;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.p3  {
    font-size: 1.1rem;
    font-weight: bold;
    /*padding: 0 10px;*/
    margin: auto;
    text-indent: 30px;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.article3  {
    display: grid;
    grid-column: 1;
    grid-row: 6;
    grid-area: article3;
    background-color: #aaa;
    padding: 20px 0;
}
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
.p4  {
    font-size: 1.1rem;
    font-weight: 600;
    margin: auto;
    padding: 5px 15px;
}
}