/* =================================================== */
/* =====  iPAD AND SMALLER SCREENS */
/* =================================================== */
/* iPad and other  mobile devices */

/* MAIN CONTENT* */
main#content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "illustration"
    "main"
    "sidebar";
}

div.illustration {
  grid-area: illustration;
}

article.our-office {
  margin: 0 1em 0 1.5em;
  background-color: white;
}

article.support-us {
  margin-bottom: 1em;
  background-color: rgb(242, 245, 239);
  border: 1px grey solid;
border-radius: 10px;
padding: 0.5em;
}

article.like-us,
article.help-us{
  width: auto;
  padding: 1em;
}


.membership a {
  color: black;
  text-decoration: none;
  border-bottom: 2px solid blue;
}
a:hover {
  color: blue;
}

.main-right {
  grid-area: main;
}

.aside-left {
  grid-area: sidebar;
}

ul.contact-us {
  background-color: #f5f5f5;
  padding: 3px 2rem;
  margin-bottom: 1em;
}

/* =================================================== */
/* =====  LARGE SCREENS SCREENS */
/* =================================================== */
/* iPad and other  mobile devices */
@media screen and (min-width: 771px) {
  /* MAIN CONTENT* */
  main#content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    grid-template-areas:
      "illustration main"
      "sidebar main";
  }

  article.help-us {
    margin-top: 2em;
  }

  article.like-us,
  article.help-us,
  ul.contact-us {
    background-color: #f5f5f5;
    width: auto;
    padding: 1em;
    border: 1px grey solid;
    border-radius: 10px;
  }
}