/* rem and em do NOT depend on HTML font-size in media queries!!
Instead, 1rem = 1em = 16px  */

/*-------------------------------------------------- BELOW 1600px (Big Desktop) */

@media (max-width: 100em) {
  html {
    font-size: 60%;
  }
  .referenzen-content {
    grid-template-columns: repeat(7, 1fr);
  }

  .referenz-img-1 {
    grid-row: 1 / 4;
    grid-column: 1 / 4;
  }

  .referenz-img-2 {
    grid-row: 1 / 4;
    grid-column: 3 / 5;
  }

  .referenz-img-3 {
    grid-row: 1 / 7;
    grid-column: 5 / 7;
  }

  .referenz-img-4 {
    grid-row: 1 / 4;
    grid-column: 7 / 8;
  }

  .referenz-img-5 {
    grid-row: 4 / 7;
    grid-column: 7 / 8;
  }

  .referenz-img-6 {
    grid-row: 4 / 7;
    grid-column: 1 / 2;
  }

  .referenz-img-7 {
    grid-row: 4 / 7;
    grid-column: 2 / 4;
  }

  .referenz-img-8 {
    grid-row: 4 / 7;
    grid-column: 4 / 5;
  }
}

/*-------------------------------------------------- BELOW 1350px (Smaller Desktop) */

@media (max-width: 85em) {
  .referenzen-content {
    grid-template-columns: repeat(6, 1fr);
  }

  .referenz-img-3 {
    grid-row: 1 / 5;
    grid-column: 5 / 7;
  }

  .referenz-img-4 {
    grid-row: 5 / 7;
    grid-column: 5 / 6;
  }

  .referenz-img-5 {
    grid-row: 5 / 7;
    grid-column: 6 / 7;
  }
}

/*-------------------------------------------------- BELOW 1200px (Smaller Desktop) */

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

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

  .referenz-img-1 {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
  }

  .referenz-img-2 {
    grid-row: 1 / 3;
    grid-column: 3 / 5;
  }

  .referenz-img-3 {
    grid-row: 1 / 7;
    grid-column: 5 / 6;
  }

  .referenz-img-4 {
    grid-row: 3 / 5;
    grid-column: 1 / 3;
  }

  .referenz-img-5 {
    grid-row: 3 / 5;
    grid-column: 3 / 5;
  }

  .referenz-img-6 {
    grid-row: 5 / 7;
    grid-column: 1 / 2;
  }

  .referenz-img-7 {
    grid-row: 5 / 7;
    grid-column: 2 / 4;
  }

  .referenz-img-8 {
    grid-row: 5 / 7;
    grid-column: 4 / 5;
  }
}

/*-------------------------------------------------- BELOW 990px (Smaller Desktop) */

@media (max-width: 62em) {
  .hero-img {
    display: none;
  }

  .hero-text {
    grid-column: 1 / 4;
  }
  .referenzen-content {
    grid-template-columns: repeat(3, 1fr);
  }

  .referenz-img-1 {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
  }

  .referenz-img-2 {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
  }

  .referenz-img-3 {
    grid-row: 1 / 5;
    grid-column: 3 / 5;
  }

  .referenz-img-4 {
    grid-row: 3 / 5;
    grid-column: 1 / 2;
  }

  .referenz-img-5 {
    grid-row: 3 / 5;
    grid-column: 2 / 3;
  }

  .referenz-img-6 {
    grid-row: 5 / 7;
    grid-column: 1 / 2;
  }

  .referenz-img-7 {
    grid-row: 5 / 7;
    grid-column: 2 / 3;
  }

  .referenz-img-8 {
    grid-row: 5 / 7;
    grid-column: 3 / 5;
  }
}

/*-------------------------------------------------- BELOW 780px (Smaller Desktop) */

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

  .hero-content {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-text {
    grid-row: 1 / 4;
    grid-column: 1 / 4;
  }

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

  .teams-content {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }

  .kurzmeldungen-content {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-img {
    display: none;
  }
}

/*-------------------------------------------------- BELOW 550px (Smaller Desktop) */

@media (max-width: 35em) {
  .hero-content {
    grid-template-rows: repeat(3, 16rem);
  }

  .hero-text {
    grid-row: 1 / 3;
    grid-column: 1 / 5;
    border-bottom-left-radius: 0;
    border-top-right-radius: 15px;
  }

  .number-1 {
    grid-row: 3 / 4;
    grid-column: 1;
    border-bottom: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 15px;
    border-right: 1px solid var(--clr-white);
  }

  .number-2 {
    grid-row: 3 / 4;
    grid-column: 2;
    border-bottom: 0;
    border-right: 1px solid var(--clr-white);
  }

  .number-3 {
    grid-row: 3 / 4;
    grid-column: 3;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .n-name-label,
  .n-name-input,
  .telefon-label,
  .telefon-input {
    grid-column: 1;
  }

  .message-label,
  .message-textarea {
    grid-column: 1;
  }
}

/*-------------------------------------------------- BELOW 450px (Smaller Desktop) */

@media (max-width: 28em) {
  .hero-content {
    grid-template-rows: repeat(3, 20rem);
  }
  .leistungen-content {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .leistung {
    padding: 2rem 1rem;
  }

  .kurzmeldungen-content {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}