/* =====================================
   YEHA ATELIER
   RESPONSIVE DESIGN
===================================== */

/* TABLETS */

@media (max-width: 1100px) {
  .nav-links {
    gap: 25px;
  }

  .hero h1 {
    font-size: 80px;
  }

  .split,
  .featured,
  .craftsmanship,
  .contact-container {
    grid-template-columns: 1fr;

    gap: 50px;
  }

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

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

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

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

  .featured-main img {
    height: 600px;
  }

  .split img,
  .craft-image img {
    height: 600px;
  }

  .editorial-layout {
    grid-template-columns: 1fr;
  }

  .philosophy h2 {
    font-size: 60px;
  }

  .contact h2 {
    font-size: 60px;
  }
}

/* MOBILE */

@media (max-width: 768px) {
  section {
    padding: 80px 6%;
  }

  /* NAVIGATION */

  .nav {
    height: 80px;

    width: 88%;
  }

  .logo {
    font-size: 34px;
  }

  .nav-links {
    display: none;
  }

  .menu-btn {
    display: block;

    color: #f4ead7;
  }

  /* HERO */

  .hero {
    height: 90vh;
  }

  .hero-content {
    width: 88%;
  }

  .hero h1 {
    font-size: 58px;
  }

  .hero p {
    font-size: 15px;
  }

  .hero-buttons {
    flex-direction: column;

    align-items: flex-start;
  }

  .btn {
    padding: 13px 28px;
  }

  /* TITLES */

  .section-title h2,
  .split h2,
  .featured-content h2,
  .craft-content h2,
  .contact h2 {
    font-size: 45px;
  }

  /* STORY */

  .split img,
  .craft-image img {
    height: 450px;
  }

  /* COLLECTIONS */

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

  .card img {
    height: 420px;
  }

  /* SIGNATURE */

  .signature-card {
    padding: 30px;

    min-height: 220px;
  }

  /* FEATURED */

  .featured-main img {
    height: 500px;
  }

  /* ATELIER */

  .atelier-step img {
    height: 350px;
  }

  /* GALLERY */

  .editorial-layout {
    display: flex;

    flex-direction: column;
  }

  .editorial-image img,
  .large img {
    height: 420px;
  }

  /* SERVICES */

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

  /* PHILOSOPHY */

  .philosophy {
    height: 70vh;
  }

  .philosophy h2 {
    font-size: 42px;
  }

  /* CONTACT */

  .contact-container {
    gap: 40px;
  }

  .contact-item {
    padding: 20px 0;
  }

  /* FOOTER */

  .footer-brand h2 {
    font-size: 80px;
  }

  .footer-navigation {
    flex-direction: column;

    gap: 18px;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 20px;
  }
}