/* === Base styles (desktops) === */
/* Already in your main CSS */

/* === Large desktops (above 1600px) === */
@media (min-width: 1600px) {
  .logo p {
    font-size: 1.5rem;
  }
  .logo {
    width: 20%;
  }
}

/* === Laptops / smaller desktops (1024px – 1599px) === */
@media (max-width: 1599px) and (min-width: 1024px) {
  .logo p {
    font-size: 1.2rem;
  }
}

/* === Tablets (768px – 1023px) === */
@media (max-width: 1023px) and (min-width: 768px) {
  .logo {
    width: 35%;
  }
  .logo p {
    font-size: 1rem;
  }
}

/* === Mobile landscape (480px – 767px) === */
@media (max-width: 767px) and (orientation: landscape) {
  .selection {
    flex-direction: column;
  }
  .brand {
    width: 100%;
    height: 50vh;
  }
  .logo {
    width: 40%;
  }
  .logo p {
    font-size: 1rem;
  }
}

/* === Mobile portrait (max 479px) === */
@media (max-width: 479px) {
  .selection {
    flex-direction: column;
  }
  .brand {
    width: 100%;
    height: 50vh;
  }
  .logo {
    width: 50%;
  }
  .logo p {
    font-size: 0.9rem;
  }
}