@media (min-width: 320px) {}

@media (min-width: 375px) {
  header {
    background-position-y: -1.5rem;
  }
}

@media (min-width: 425px) {
  header {
    height: 22rem;
    background-position-y: -2rem;
  }
}

@media (min-width: 768px) {
  nav {
    margin-top: 3rem;
  }

  section:not([class="mission-statement"]) {
    display: grid;
    width: 85%;
    margin: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  :is(img) {
    border-radius: 10px;
    width: 60%;
    justify-self: center;
  }

  .full-width {
    grid-column: 1 / span 2;
  }

  .club-name {
    position: unset;
    margin: 0 auto;
  }

  header {
    background: none;
    align-items: center;
  }

  .club-name {
    background-color: transparent;
    color: var(--orangish);
  }

  .mobile-hidden {
    display: block;
  }

  .sun-and-moon-img {
    width: 25%;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 20px white;
  }

  nav {
    height: 3rem;
  }

  nav ul {
    justify-content: space-evenly;
  }

  h2 {
    grid-column: 1 / span 2;
    text-align: left;
  }

  .introduction {
    margin-block: 3rem;
  }

  blockquote {
    padding-inline: 3rem;
  }

  .card {
    grid-column: span 2;

    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "img content"
  }

  .card__content {
    grid-area: content;
  }

  .card :is(img) {
    border-radius: 20% 10%;
  }

  .card:nth-child(odd) {
    grid-template-areas:
      "content img";
  }

  .card:nth-child(odd) :is(img) {
    border-radius: 10% 20%;
  }

  .member {
    grid-area: img;
  }

  .name {
    font-size: 1.25rem;
  }

  .behind-the-scenes figure {
    width: 65%;
    justify-self: center;
  }

  .about img {
    justify-self: center;
  }

  .location :is(p) {
    justify-self: center;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 17px;
  }

  nav {
    height: 4rem;
  }
}

@media (min-width: 1440px) {}