/***********************************/
/*** BELOW 1344px (smaller desktop) ***/
/***********************************/

@media (max-width: 84em) {
  .logo {
    height: 85vh;
  }

  .logo--big {
    scale: 0.45;
    height: 27vh;
    left: 37%;
  }

  header {
    height: 85vh;
  }

  .about-description {
    font-size: 2.5rem;
  }

  .img-col {
    height: 70vh;
  }

  .follow-text-col {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/***********************************/
/*** BELOW 1200px (landscape tablets) ***/
/***********************************/

@media (max-width: 75em) {
  .grid {
    column-gap: 8rem;
  }

  .logo {
    height: 80vh;
  }

  .logo--big {
    scale: 0.4;
    height: 23vh;
    left: 35%;
  }

  header {
    height: 80vh;
  }

  .music-description {
    font-size: 2.4rem;
  }

  .about-description {
    font-size: 2.5rem;
  }
}

.img-col {
  height: 60vh;
}

.follow-text-col {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/***********************************/
/*** BELOW 944px (tablets) ***/
/***********************************/

@media (max-width: 59em) {
  .container {
    padding: 0 5rem;
  }

  .grid {
    row-gap: 10rem;
  }

  .grid--2-cols {
    grid-template-columns: repeat(1, 1fr);
  }

  .logo {
    height: 80vh;
  }

  .logo--big {
    scale: 0.6;
    height: 15vh;
    top: 3%;
    left: 35%;
  }

  header {
    height: 80vh;
  }

  .main-nav-list {
    flex-direction: column;
    align-items: start;
  }

  .music {
    padding-top: 9rem;
  }

  .music-text {
    position: relative;
  }

  .heading-music {
    text-align: center;
    margin-bottom: 3rem;
  }

  .music-description {
    display: flex;
    text-align: center;
    margin-bottom: 3rem;
  }

  .btn-music:link,
  .btn-music:visited {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .heading-about {
    top: 16%;
  }

  .about-description {
    top: 39%;
    font-size: 2.5rem;
  }

  .grid--follow {
    grid-template-columns: repeat(1, 1fr);
  }

  .img-col {
    height: 60vh;
  }

  .follow-text-col {
    border-top: 4px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .follow-description {
    text-align: center;
  }

  .heading-downloads {
    font-size: 4.5rem;
  }

  .downloads-list-table {
    text-align: left;
    list-style-type: disc;
  }

  .downloads-links:link,
  .downloads-links:visited {
    font-size: 1.4rem;
    line-height: 2;
  }
}

/***********************************/
/*** BELOW 704px (smaller tablets) ***/
/***********************************/

@media (max-width: 44em) {
  .container {
    padding: 0 4rem;
  }

  .grid {
    row-gap: 10rem;
  }

  .grid--2-cols {
    grid-template-columns: repeat(1, 1fr);
  }

  .logo {
    height: 62vh;
  }

  .logo--big {
    scale: 0.5;
    height: 15vh;
    top: 3%;
    left: 30%;
  }

  header {
    height: 62vh;
    background-size: cover;
  }

  .main-nav-list {
    flex-direction: column;
    align-items: start;
  }

  .music {
    padding-top: 8rem;
  }

  .heading-music {
    text-align: center;
    margin-bottom: 3rem;
  }

  .music-description {
    display: flex;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .btn-music:link,
  .btn-music:visited {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .music-spotify {
    margin-bottom: 5rem;
  }

  .spotify-player {
    height: 36rem;
  }

  .heading-about {
    top: 14%;
  }

  .about-description {
    top: 37%;
    font-size: 1.85rem;
  }

  .grid--follow {
    grid-template-columns: repeat(1, 1fr);
  }

  .img-col {
    height: 50vh;
  }

  .follow-text-col {
    border-top: 4px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .follow-description {
    text-align: center;
  }

  .heading-follow {
    font-size: 5rem;
  }

  .heading-downloads {
    font-size: 4.2rem;
  }

  .downloads-list-table {
    text-align: left;
    list-style-type: disc;
  }

  .downloads-links:link,
  .downloads-links:visited {
    font-size: 1.2rem;
    line-height: 2;
  }
}

/***********************************/
/*** BELOW 544px (phones) ***/
/***********************************/

@media (max-width: 34em) {
  .container {
    padding: 0 3.5rem;
  }

  .grid {
    row-gap: 10rem;
  }

  .grid--2-cols {
    grid-template-columns: repeat(1, 1fr);
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2rem;
    letter-spacing: 2.5px;
  }

  .logo {
    height: 62vh;
  }

  .logo--big {
    scale: 0.5;
    height: 10vh;
    top: 5%;
    left: 30%;
  }

  header {
    height: 62vh;
    background-size: cover;
  }

  .music {
    padding-top: 6rem;
  }

  .main-nav-list {
    flex-direction: column;
    align-items: start;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2rem;
  }

  .heading-music {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 3rem;
  }

  .music-description {
    font-size: 2.4rem;
  }

  .music-description {
    display: flex;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .btn-music:link,
  .btn-music:visited {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .music-spotify {
    margin-bottom: 6rem;
  }

  .spotify-player {
    height: 36rem;
  }

  .heading-about {
    font-size: 3.5rem;
    top: 14%;
  }

  .about-description {
    font-size: 1.7rem;
    top: 37%;
  }

  .grid--follow {
    grid-template-columns: repeat(1, 1fr);
  }

  .img-col {
    height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .follow-text-col {
    border-top: 4px solid #fff;
    display: flex;
    flex-direction: column;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .follow-description {
    text-align: center;
  }

  .heading-follow {
    font-size: 3.5rem;
  }

  .heading-downloads {
    font-size: 4rem;
  }

  .downloads-list-table {
    text-align: left;
    list-style-type: disc;
  }

  .downloads-links:link,
  .downloads-links:visited {
    font-size: 1.1rem;
    line-height: 2;
  }

  .email-popup {
    width: 300px;
    padding: 25px 30px;
  }

  .button-close {
    margin: 0 0 18px auto;
    font-size: 2.5rem;
    width: 30px;
    height: 30px;
  }
}

/***********************************/
/*** BELOW 400px (small phones) ***/
/***********************************/

@media (max-width: 25em) {
  .container {
    padding: 0 3rem;
  }

  .grid {
    row-gap: 10rem;
  }

  .grid--2-cols {
    grid-template-columns: repeat(1, 1fr);
  }

  .main-nav-list {
    flex-direction: column;
    align-items: start;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2rem;
    letter-spacing: 2.5px;
  }

  .logo {
    height: 62vh;
  }

  .logo--big {
    height: 10vh;
    scale: 0.5;
    top: 5%;
    left: 30%;
  }

  header {
    height: 62vh;
    background-size: cover;
  }

  .music {
    padding-top: 6rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2rem;
  }

  .heading-music {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 3rem;
  }

  .music-description {
    font-size: 2.2rem;
  }

  .music-description {
    display: flex;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .btn-music:link,
  .btn-music:visited {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .music-spotify {
    margin-bottom: 6rem;
  }

  .spotify-player {
    height: 36rem;
  }

  .heading-about {
    font-size: 3.5rem;
    top: 14%;
  }

  .about-description {
    font-size: 1.5rem;
    top: 37%;
  }

  .grid--follow {
    grid-template-columns: repeat(1, 1fr);
  }

  .img-col {
    height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .follow-text-col {
    border-top: 4px solid #fff;
    display: flex;
    flex-direction: column;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .follow-description {
    font-size: 2.5rem;
    text-align: center;
  }

  .heading-follow {
    font-size: 3.5rem;
  }

  .heading-downloads {
    font-size: 4rem;
  }

  .downloads-list-table {
    text-align: left;
    list-style-type: disc;
  }

  .downloads-links:link,
  .downloads-links:visited {
    font-size: 1.1rem;
    line-height: 2;
  }

  .email-popup {
    width: 300px;
    padding: 25px 30px;
  }

  .button-close {
    margin: 0 0 18px auto;
    font-size: 2.5rem;
    width: 30px;
    height: 30px;
  }
}