/**************************/
/* BELOW 1210px (Smaller desktops) */
/**************************/

@media (max-width: 76em) {
  .box-top-left {
    width: 100%;
  }

  .hamburger-menu {
    display: flex;
  }

  .footer {
    position: static;
    justify-content: center;
    align-items: center;
    min-width: none;
    min-height: none;
    height: auto;
  }

  .nav {
    display: none;
  }

  .hero {
    min-height: 100vh;
  }

  .icon-mobile[name="close-outline"] {
    display: none;
  }

  .icon-mobile[name="menu-outline"] {
    display: block;
  }

  .intro {
    flex-direction: column;
    align-items: center;
  }

  .artists-grid {
    grid-template-columns: 50rem;
  }

  .artist-profile-1,
  .artist-profile-2,
  .artist-profile-3,
  .artist-profile-4 {
    grid-column: auto;
    grid-row: auto;
  }

  .artist-profile-pic-1,
  .artist-profile-pic-2,
  .artist-profile-pic-3,
  .artist-profile-pic-4 {
    grid-column: auto;
    grid-row: auto;
  }

  .cta-box {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  .full-name,
  .email,
  .telephone,
  .text,
  .btn-form {
    grid-column: 1;
    grid-row: auto;
  }

  .gallery-grid {
    width: 90rem;
    height: 90rem;
  }

  .cta-box {
    width: 90rem;
  }

  .osm-box {
    width: 90rem;
  }
}
/**************************/
/* BELOW 968px (Smaller desktops) */
/**************************/

@media (max-width: 60em) {
  html {
    font-size: 70%;
  }

  .footer-list {
    font-size: 2rem;
  }

  .gallery-grid {
    width: 70rem;
    height: 70rem;
  }

  .cta-box {
    width: 70rem;
  }

  .osm-box {
    width: 70rem;
  }
}

/**************************/
/* BELOW 788px (Smaller desktops) */
/**************************/

@media (max-width: 50em) {
  html {
    font-size: 50%;
  }

  .title {
    width: 50rem;
  }

  .title-img {
    width: 25rem;
    height: 25rem;
  }

  .slideshow {
    width: 25rem;
  }

  .intro-box {
    width: 50rem;
  }

  .intro-box:nth-child(1) {
    text-align: center;
    height: 12rem;
  }

  .intro-title {
    font-size: 3.5rem;
  }

  .gallery-grid {
    width: 50rem;
    height: 50rem;
  }

  .cta-box {
    width: 50rem;
  }

  .osm-box {
    width: 50rem;
  }

  .artists-grid {
    grid-template-rows: none;
  }

  .artist-profile-1,
  .artist-profile-2,
  .artist-profile-3,
  .artist-profile-4 {
    width: 40rem;
    height: 40rem;
    place-self: center;
  }

  .artist-profile-title-1,
  .artist-profile-title-2,
  .artist-profile-title-3,
  .artist-profile-title-4 {
    text-align: center;
  }

  .artist-profile-title-1,
  .artist-profile-title-2,
  .artist-profile-title-3,
  .artist-profile-title-4 {
    text-align: left;
  }

  .profile-pic-1,
  .profile-pic-2,
  .profile-pic-3,
  .profile-pic-4 {
    width: 40rem;
    height: 40rem;
  }
}

/**************************/
/* BELOW 425px (Smaller desktops) */
/**************************/

@media (max-width: 26.5em) {
  html {
    font-size: 45%;
  }

  .title {
    width: 320px;
  }

  .title-box {
    width: 50%;
  }

  .title-img {
    width: 100%;
    height: 160px;
  }

  .slideshow {
    width: 50%;
  }

  .slideshow-img {
    width: 100%;
  }

  .intro-box {
    width: 30rem;
  }

  .intro-box:nth-child(1) {
    text-align: center;
    height: 12rem;
  }

  .intro-title {
    font-size: 3.5rem;
  }

  .gallery-grid {
    width: 30rem;
    height: 30rem;
  }

  .cta-box {
    width: 30rem;
  }

  .osm-box {
    width: 30rem;
  }

  .artists-grid {
    grid-template-columns: 30rem;
  }

  .artist-profile-1,
  .artist-profile-2,
  .artist-profile-3,
  .artist-profile-4 {
    width: 30rem;
    height: 30rem;
  }

  .profile-pic-1,
  .profile-pic-2,
  .profile-pic-3,
  .profile-pic-4 {
    width: 30rem;
    height: 30rem;
  }
}