/* Smartphones (portrait) ----------- */
@media only screen and (min-device-width: 315px) and (max-device-width: 820px) {
  .grid-container {
    display: grid;
    grid-template-areas:
      "header header "
      "main main "
      "menu menu "
      "footer footer ";
    grid-gap: 5px;
    grid-template-columns: auto auto;
    justify-content: center;
  }

  .tagLine {
    font-weight: 700;
    font-size: 1.5rem;
    color: #552583;
  }

  .menuTitles {
    font-weight: 700;
    font-size: 1.4rem;
  }

  .menu {
    grid-area: menu;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #552583;
    overflow-y: auto;
  }
  .galleryImg {
    width: 40%;
    box-shadow: 2px 5px 12px #888888;
    margin: 10px;
  }

  .imageSize {
    max-width: 90%;
  }

  main {
    grid-area: main;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #552583;
  }

  .mySlides:hover {
    display: flex;
    flex-direction: row;
  }

  header {
    height: 30vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    background-image: url("../assets/icons/marble-gold.jpg");
  }

  .headerDividerTag {
    display: flex;
    text-align: center;
    justify-content: center;
    width: 90vw;
  }
  .headerDivider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 90vw;
  }
  .iconStyle {
    max-width: 90%;
    max-height: 90%;
  }
  footer {
    grid-area: footer;
    width: 98vw;
    height: 90vh;
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
    color: #552583;
    font-family: "Cinzel", serif;
    font-weight: 700;
    background-image: url("./assets/icons/marble-gold.jpg");
  }
  .footerContainers {
    height: 20vh;
    width: 90vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .socialContainer {
    height: 20vh;
    width: 90vw;
  }
  .googleImage {
    max-width: 85%;
    max-height: 45%;
  }
  .facebookImage {
    max-width: 85%;
    max-height: 45%;
  }

  .footerTitles {
    font-size: 1.5rem;
  }

  .footerContent {
    font-size: 1.2rem;
  }
}