body {
   background-image: url("../assets/crew/background-crew-desktop.jpg");
   overflow-y: hidden;
}

main .grid-cell {
   justify-self: center;
   align-self: center;
   display: flex;
   flex-direction: column;
   width: 500px;
   height: 60%;
   justify-content: space-between;
}

main .grid-cell h5.heading-5 span {
   color: #979797;
}

main .grid-cell div h4.heading-4 {
   color: #979797;
}

main .grid-cell div p.body-text {
   margin-top: 20px;
}

main .grid-cell #crew-nav-btns {
   list-style-type: none;
}

main .grid-cell #crew-nav-btns li {
   display: inline-block;
   margin-right: 15px;
}

main .grid-cell #crew-nav-btns li .crew-nav-btn {
   aspect-ratio: 1;
   width: 18px;
   background-color: rgba(151, 151, 151, 0.5);
   border-radius: 100%;
   cursor: pointer;
   display: block;
}

main .grid-cell #crew-nav-btns li .crew-nav-btn:hover {
   background-color: rgba(151, 151, 151, 0.85);
}

main .grid-cell #crew-nav-btns li .crew-nav-btn.active {
   background-color: #fff;
}

main #crew-img {
   align-self: flex-end;
   justify-self: center;
}

@media only screen and (max-width: 1500px) {
   main .grid-cell {
      height: 335px;
   }
   main .grid-cell h5.heading-5 {
      font-size: 26px;
   }
   main .grid-cell div h3.heading-3 {
      font-size: 45px;
   }
   main .grid-cell div p.body-text {
      margin-top: 10px;
   }
}

@media only screen and (max-width: 1500px) and (max-height: 750px) {
   main #crew-img {
      height: 475px;
   }
}

@media only screen and (max-width: 1250px) {
   main .grid-cell {
      justify-self: flex-end;
   }
}

@media only screen and (max-width: 1200px) {
   main .grid-cell {
      height: 325px;
      width: 460px;
   }
   main .grid-cell h5.heading-5 {
      font-size: 22px;
      letter-spacing: 3px;
   }
   main .grid-cell div h4.heading-4 {
      font-size: 26px;
   }
   main .grid-cell div h3.heading-3 {
      font-size: 38px;
   }
   main .grid-cell div p.body-text {
      margin-top: 8px;
   }
   main #crew-img {
      height: 450px;
   }
}

@media only screen and (max-width: 1000px) {
   main .grid-cell {
      height: 325px;
      width: 400px;
   }
   main .grid-cell h5.heading-5 {
      font-size: 20px;
      letter-spacing: 3px;
   }
   main .grid-cell div h4.heading-4 {
      font-size: 24px;
   }
   main .grid-cell div h3.heading-3 {
      font-size: 35px;
   }
   main .grid-cell div p.body-text {
      margin-top: 7px;
      font-size: 16px;
      line-height: 25px;
   }
   main #crew-img {
      height: 400px;
   }
}

@media only screen and (max-width: 950px) {
   body {
      background-image: url("../assets/crew/background-crew-tablet.jpg");
   }
   main {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
   }
   main .grid-cell {
      align-items: center;
      text-align: center;
      justify-self: stretch;
      width: auto;
      padding-left: 30px;
   }
   main .grid-cell h5.heading-5 {
      align-self: flex-start;
   }
   main .grid-cell div {
      width: 440px;
   }
   main .grid-cell div h3.heading-3 {
      margin-top: 10px;
      font-size: 40px;
   }
   main .grid-cell #crew-nav-btns li .crew-nav-btn {
      width: 10px;
   }
}

@media only screen and (max-width: 675px) {
   main .grid-cell h5.heading-5 {
      font-size: 18px;
   }
   main .grid-cell div h4.heading-4 {
      font-size: 22px;
   }
   main .grid-cell div h3.heading-3 {
      font-size: 36px;
      margin-top: 8px;
   }
   main .grid-cell div p.body-text {
      font-size: 15px;
   }
   main #crew-img {
      height: 360px;
   }
}

@media only screen and (max-width: 625px) {
   body {
      background-image: url("../assets/crew/background-crew-mobile.jpg");
   }
   main {
      padding: 0 30px;
      position: relative;
   }
   main .grid-cell {
      grid-row-start: 2;
      box-sizing: border-box;
      border-top: 1px solid rgba(151, 151, 151, 0.5);
      padding: 0;
      flex-direction: column-reverse;
      justify-content: flex-end;
      align-self: flex-start;
      height: 250px;
      padding-top: 10px;
   }
   main .grid-cell h5.heading-5 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
   }
   main .grid-cell div {
      margin-top: 30px;
   }
   main #crew-img {
      grid-row-start: 1;
      height: 325px;
   }
}

@media only screen and (max-width: 510px) {
   main .grid-cell div {
      width: 100%;
   }
   main .grid-cell div h4.heading-4 {
      font-size: 16px;
   }
   main .grid-cell div h3.heading-3 {
      font-size: 24px;
   }
   main #crew-img {
      height: 300px;
   }
}

@media only screen and (max-width: 450px) {
   main #crew-img {
      height: 250px;
   }
}