/* rem and em do not depend on html font-size in media query. 
Instead, 1rem = 1em = 16px*/

/* ********************** */
/*BELOW 1232px /* 
/* ********************** */

@media (max-width: 77em) {
  /* HELPER CLASS */

  .btn--small {
    padding: 0.6rem 1.8rem;
  }

  .btn--medium {
    padding: 0.8rem 2.6rem;
  }

  .btn--big {
    padding: 1rem 3rem;
  }

  /* HEADER / BUTTONS */

  .primary-logo,
  .secondary-logo {
    height: 8rem;
  }

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

  /* HERO SECTION  */

  .hero-box {
    top: 45%;
  }

  .hero-artist:link,
  .hero-artist:visited {
    font-size: 6.4rem;
    margin-bottom: 1.8rem;
  }

  .hero-tagline {
    margin-bottom: 2.4rem;
  }

  .hero-tagline,
  .reviews [name="star"],
  .reviews p {
    font-size: 3rem;
  }

  .reviews {
    gap: 1.8rem;
    margin-bottom: 4.4rem;
  }

  .primary-cta:link,
  .primary-cta:visited,
  .secondary-cta:link,
  .secondary-cta:visited {
    font-size: 2.4rem;
  }

  /* GALLERY SECTION */
  .section-gallery {
    padding: 8rem;
  }

  .section-gallery h2 {
    font-size: 3.3rem;
  }

  .secondary-heading,
  .form-title {
    font-size: 3.6rem;
  }

  .big--margin-bottom {
    margin-bottom: 6.4rem;
  }

  .filter-nav {
    gap: 3rem;
  }

  .link-icon-box {
    gap: 0.6rem;
  }

  .filter-icon {
    font-size: 1.8rem;
  }

  .filter:link,
  .filter:visited {
    font-size: 1.4rem;
  }

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

  .image-caption {
    font-size: 1rem;
  }

  /* ABOUT SECTION */
  .section-about {
    padding: 6rem;
  }

  .subheading {
    font-size: 1.2rem;
  }

  .about-subhead {
    font-size: 2rem;
  }

  .about-text {
    font-size: 1.8rem;
  }

  /* CONTACT-SECTION */

  .contact-form,
  .input,
  .textarea {
    font-size: 1.8rem;
  }

  .check-input-box {
    gap: 1.2rem;
  }

  .checkbox-input {
    transform: scale(1.3);
  }

  .label:last-child {
    font-size: 1.4rem;
  }

  .form-btn {
    font-size: 2rem;
  }

  .social-icon {
    font-size: 2rem;
    padding: 1rem 8.2rem;
  }

  /* FOOTER */
  .footer-box {
    max-width: 85%;
  }

  .footer-subhead {
    font-size: 2.4rem;
  }

  .social-link-icon,
  .social-links a:link,
  .social-links a:visited,
  .footer-icon,
  .nav-item a:link,
  .nav-item a:visited,
  .footer-link-box a:link,
  .footer-link-box a:visited,
  .contact--box a:link,
  .contact--box a:visited,
  .footer-text {
    font-size: 1.6rem;
  }
}

/* ********************** */
/*BELOW 995px /* 
/* ********************** */
@media (max-width: 66.2em) {
  /* GENERAL SETTINGS */
  html {
    font-size: 56.25%;
    overflow: auto;
  }

  /* HERO SECTION */
  .hero-box {
    width: 65%;
  }

  .hero-artist:link,
  .hero-artist:visited {
    font-size: 5.2rem;
  }

  .hero-tagline,
  .reviews [name="star"],
  .reviews p {
    font-size: 2.6rem;
  }

  /* GALLERY SECTION */
  .section-gallery h2 {
    font-size: 3rem;
  }

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

  /* ABOUT SECTION */
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-img {
    cursor: pointer;
  }

  .about-img:hover {
    transform: scale(1.3);
  }

  .about-text-layout {
    gap: 1.2rem;
  }

  .about-text {
    letter-spacing: 0.75px;
  }

  .btn--box {
    display: flex;
    justify-content: center;
    padding: 3.6rem;
  }

  /* CONTACT SECTION */
  .contact-form,
  .input,
  .textarea {
    font-size: 1.6rem;
  }

  .label:last-child {
    font-size: 1.2rem;
  }

  .textarea::placeholder {
    padding: 1.6rem;
  }

  .checkbox-input {
    transform: scale(1);
  }

  .social-icon {
    font-size: 2rem;
    padding: 1rem 6.4rem;
  }

  /* FOOTER */

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

  .social-link-icon,
  .social-links a:link,
  .social-links a:visited,
  .footer-icon,
  .nav-item a:link,
  .nav-item a:visited,
  .footer-link-box a:link,
  .footer-link-box a:visited,
  .contact--box a:link,
  .contact--box a:visited {
    font-size: 1.4rem;
  }

  .footer-text {
    font-size: 1.2rem;
  }
}

/* ********************** */
/*BELOW 869x /* 
/* ********************** */

@media (max-width: 54.313em) {
  /* GENERAL SETTINGS */
  html {
    font-size: 50%;
  }

  /* HERO SECTION */
  .hero-box {
    width: 90%;
  }

  /* GALLERY SECTION */
  .section-gallery h2 {
    font-size: 2.4rem;
  }

  .secondary-heading,
  .form-title {
    font-size: 3rem;
  }
}

/* ********************** */
/*BELOW 728x /* 
/* ********************** */
@media (max-width: 45.5em) {
  /* HEADER MOBILE NAVIGATION */

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

  .mobile-nav-btn {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
  }

  .mobile-nav .nav-list {
    opacity: 100%;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .mobile-nav .main-nav-icon[name="close"] {
    display: block;
  }

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

  /* Hero SECTION */
  .hero-box {
    width: 100%;
  }

  .hero-tagline,
  .reviews [name="star"],
  .reviews p {
    font-size: 2.4rem;
  }

  /* GALLERY SECTION */

  .section-gallery {
    position: relative;
  }

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

  .filter-nav-btn {
    display: block;
  }

  .filter-nav {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .hide-file .filter-nav {
    opacity: 100%;
    pointer-events: auto;
    visibility: visible;
  }

  .hide-file .filter-menu {
    display: none;
  }

  .hide-file .filter-close {
    display: block;
  }

  .interpage:link,
  .interpage:visited {
    font-size: 1.4rem;
  }

  .box [name="open-outline"] {
    font-size: 1.6rem;
  }

  /* CONTACT SECTION */
  .secondary-heading,
  .form-title {
    font-size: 2.4rem;
  }

  .form-title {
    margin-bottom: 3.2rem;
  }

  .label:not(.label:last-of-type) {
    margin-bottom: 1.4rem;
  }

  .contact-form [for="textarea"] {
    font-weight: 500;
  }

  .input {
    padding: 1.8rem;
  }

  .input,
  .textarea {
    margin-bottom: 3rem;
  }

  .form-btn {
    font-size: 1.8rem;
  }

  .social-icon {
    font-size: 2rem;
    padding: 1rem 5.2rem;
  }
}

/* ********************** */
/*BELOW 632x /* 
/* ********************** */

/* GENERAL SETTIMGS */
@media (max-width: 39.5em) {
  html {
    font-size: 43.75%;
  }

  /* HERO SECTION */
  .section-hero {
    height: 80vh;
  }

  /* .hero-artist:link,
  .hero-artist:visited {
    font-size: 4.4rem;
  } */

  .hero-box {
    top: 50%;
  }

  /* CONTACT SECTION */
  .social-icon {
    font-size: 2rem;
    padding: 1rem 5.2rem;
  }
}

/* ********************** */
/*BELOW 549x /* 
/* ********************** */

@media (max-width: 34.313em) {
  /* GENERAL SETTINGS */
  html {
    font-size: 37.5%;
  }

  /* GALLERY SECTION */
  .section-gallery h2 {
    font-size: 2.2rem;
  }

  .gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* CONTACT SECTION */
  .social-icon {
    font-size: 2rem;
    padding: 1rem 4rem;
  }

  /* FOOTER */
  .footer-box {
    grid-template-columns: 1fr 1fr;
  }

  .main-sect-links {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .copyright {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .policy {
    align-self: start !important;
    justify-self: start;
    padding: 0 3rem 3rem 3rem;
  }

  .copyright,
  .main-sect-links {
    align-self: center;
    padding: 3rem;
  }

  .nav-items {
    flex-direction: row;
  }

  .footer-icon,
  .nav-item a:link,
  .nav-item a:visited {
    font-size: 1.8rem;
    font-weight: 500;
  }

  .social-link-icon {
    font-size: 1.8rem;
  }

  .footer-subhead {
    display: none;
  }
}

/* ********************** */
/*BELOW 446x /* 
/* ********************** */
@media (max-width: 27.9em) {
  /* GENERAL SETTINGS */
  body {
    background-color: var(--secondary-color);
    color: var(--main-background);
  }

  .primary-logo,
  .secondary-logo {
    height: 10rem;
  }

  .btn--small {
    padding: 0.8rem 2rem;
    border-radius: 0.6rem;
  }

  .btn--medium {
    padding: 1rem 2.4rem;
    border-radius: 0.6rem;
  }

  .btn--big {
    padding: 1.6rem 3.6rem;
    border-radius: 0.6rem;
  }

  .big--margin-bottom {
    margin-bottom: 8rem;
  }

  .secondary-heading,
  .form-title {
    font-size: 1.8rem;
    font-weight: 700;
  }
  .secondary-heading,
  .form-title {
    color: var(--secondary-color);
  }

  /* HEADER */
  .header-box {
    background-color: var(--secondary-color);
  }

  .header-box {
    padding: 8rem 4rem;
  }

  .main-nav-icon[name="menu-outline"] {
    color: var(--main-background);
  }

  /* HERO SECTION */
  .section-hero {
    height: 60vh;
  }

  .hero-box {
    top: 45%;
    left: 8%;
  }

  .hero-artist:link,
  .hero-artist:visited {
    font-size: 4.4rem;
    margin-bottom: 2.4rem;
  }

  .hero-tagline {
    margin-bottom: 3.6rem;
  }

  .hero-tagline,
  .reviews [name="star"],
  .reviews p {
    font-size: 2rem;
  }

  .reviews {
    margin-bottom: 6rem;
  }

  /* MOBILE NAVIGATION  (HEADER NAIGATION AND GALLERY FILTER)*/

  .mobile-color {
    color: var(--main-background);
  }

  .hide-file .filter-menu {
    top: 8%;
  }

  /* GALLERY SECTION */

  .section-gallery h2 {
    font-size: 1.8rem;
  }

  .secondary-heading,
  .form-title {
    font-size: 1.8rem;
  }

  .image-caption {
    font-size: 1rem;
  }

  .interpage:link,
  .interpage:visited {
    color: var(--main-background);
  }

  /* CONTACT SECTION */
  .contact-form,
  .input,
  .textarea {
    font-size: 1.4rem;
    font-weight: 700;
  }

  .label {
    color: var(--secondary-color);
  }

  .label:last-child {
    font-size: 1rem;
  }

  .textarea::placeholder {
    padding: 0.8rem;
  }

  .social-icon {
    font-size: 1.8rem;
    padding: 0.8rem 4rem;
  }

  /* FOOTER */

  .footer-text {
    color: var(--secondary-color);
  }
}

/* ********************** */
/*BELOW 379px /* 
/* ********************** */
@media (max-width: 23.7em) {
  /* GENERAL SETTINGS */
  html {
    font-size: 31.25%;
  }
}