/* grid gallery */
.header {
  grid-area: header;
}
.content {
  grid-area: largeimage;
}
.selectors {
  grid-area: selectors;
  overflow-x: auto;
  max-height: 80%;
}
.selectors:hover {
    cursor: pointer;
}
.selectors img {
  padding: 1rem;
}
.side {
  grid-area: sidebar;
}
.cta {
  grid-area: cta;
}
.footer {
  grid-area: footer;
}

.wrapper {
  display: block;
  gap: 20px;
}

.small {
    width: 100%;
    height: auto;
}
#expandedImg {
    display: none;
}
article.content,
aside.side,
.cta, 
.footer {
    display: none;
}
@media (min-width: 768px) {
    article.content,
    aside.side,
    .cta, 
    footer {
        display: block;
    }
    #expandedImg {
        display: block;
        width: 80%;
        height: auto;
    }
    .small {
        height: auto;
    }
    #expandedImg {
        width: 90%;
        height: auto;
    }
    .wrapper {
        display: grid;
        grid-row-gap: 10px;
        grid-template-columns: 1fr 3fr;
        grid-template-areas:
            "header  header"
            "cta     sidebar"
            "largeimage largeimage"
            "selectors selectors"
            "footer footer";
    }
    nav.selectors {
        width: 100%;
    }
    nav.selectors ul {
        display: flex;
        flex-direction: columns;
        height: 240px;
    }
}

@media (min-width: 992px) {
  .small {
    height: auto;
  }
  #expandedImg {
    width: 100%;
    height: auto;
  }
  .wrapper {
    display: grid;
    align-items: start;
    grid-template-columns: 240px 4fr 1fr;
    grid-template-areas:
      "header sidebar cta"
      "selectors largeimage largeimage"
      "footer footer footer";
  }
  nav.selectors ul {
    flex-direction: column;
    min-height: 800px;
  }
} 

/* @media (min-width: 1050px) {
  .small {
    width: 240px;
    height: auto;
  }
  .wrapper {
    grid-template-columns: 250px 4fr 1fr;
    grid-template-areas:
      "header header  header"
      "selectors largeimage largeimage"
      "footer footer  footer";
  }
  nav.selectors ul {
    flex-direction: column;
  }
} */