@media only screen and (min-width: 560px) {
  .innerH1 {
    font-size: 18px;
  }

  nav ul.responsive {
    height: 100%;
  }

  nav ul li a {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    margin: auto 1rem;
    font-size: 32px;
    padding: 0 0.5rem;
  }

  nav ul li.hamburger {
    font-size: 52px;
    margin-right: 0.5rem;
  }

  .social svg {
    width: 44px;
    margin: auto 0.25rem;
  }

  .spotlights {
    flex-direction: row;
  }

  .spotlights div {
    flex: 1 1 auto;
  }

  .main {
    display: grid;
    grid-template-areas:
      "hero hero hero"
      "news news news"
      "spotlights spotlights spotlights"
      "join join join"
      "events weather weather";
    gap: 1rem;
  }

  main div {
    margin: 0;
  }

  main h2 {
    font-size: 22px;
  }

  .hero {
    grid-area: hero;
  }

  .news {
    grid-area: news;
  }

  .spotlights {
    grid-area: spotlights;
    gap: 0.5rem;
  }

  .join {
    grid-area: join;
  }

  .events {
    grid-area: events;
  }

  .weather {
    grid-area: weather;
  }

  footer {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    padding: 2rem;
  }

  nav ul li a {
    padding-right: 1rem;
  }

  footer hr {
    grid-column: 1/4;
    margin: 1rem -2rem 0.5rem -2rem;
  }

  footer .contactInfo {
    text-align: right;
  }

  footer .contactInfo,
  footer .address {
    margin: auto 0;
  }

  footer .contactInfo p,
  footer .contactInfo a {
    padding: 0;
  }

  footer .address {
    text-align: left;
  }

  footer .footerDetails {
    grid-column: 1/4;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  footer .footerDetails div {
    display: flex;
    justify-content: center;
  }

  footer .footerDetails div p {
    padding: 0.25rem 0.75rem;
  }

  #lastUpdated {
    padding: 0.25rem 0.75rem;
  }

  .headerContent {
    margin: 0;
  }

  .discoverCard img {
    border-radius: 1rem;
    max-width: none;
    max-height: none;
  }

  .discoverCard:hover {
    transform: scale(1.05);
    animation-delay: 1s;
  }

  .twoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .twoGrid .spotlights {
    grid-area: auto;
    display: flex;
    flex-direction: column;
  }

  .autoList {
    flex-direction: column;
    text-align: left;
  }

  .autoList div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin: auto;
    min-width: 490px;
  }

  .autoList div hr {
    display: none;
  }

  .autoList div h2,
  .autoList div p,
  .autoList div a {
    margin: 0.5rem;
  }
}

@media only screen and (max-width: 1092px) and (min-width: 870px) {
  nav ul li a {
    font-size: 18px;
    margin: auto;
  }

  .innerH1 {
    font-size: 18px;
  }
}