@import url("https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
:root {
   /* ### Primary */
   --White: hsl(0, 0%, 100%);
   --Black: hsl(0, 0%, 0%);
   --Grey_200: #605252;
}

* {
   font-family: "Josefin Sans", sans-serif;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
}

body {
   min-height: 100vh;
}

/* header */
header {
   background-image: url("../images/desktop/image-hero.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   min-height: 100vh;
   position: relative;
}
.nav-box {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 50px 100px;
   margin: 0 50px;
   color: var(--White);
}
nav ul {
   display: flex;
}
nav ul li {
   margin-right: 15px;
}
ul li a {
   color: var(--White);
   transition: all 0.3s ease;
}
ul li a:hover {
   border-bottom: 2px solid var(--White);
   padding-bottom: 5px;
}
.icon-hamburger {
   display: none;
}
.icon-close {
   display: none;
}
header h1 {
   width: 650px;
   padding: 40px;
   font-size: 70px;
   color: var(--White);
   font-weight: 300;
   font-family: "Josefin Sans", sans-serif;
   border: 3px solid var(--White);
   position: absolute;
   top: 350px;
   left: 150px;
   text-transform: uppercase;
}

/* Main */
.mobile {
   display: none;
}
/* Section 1 */
.description-box {
   margin: 150px;
   position: relative;
}
.description-box img {
   z-index: 0;
}
.description-text {
   padding: 70px;
   width: 600px;
   background-color: var(--White);
   position: absolute;
   bottom: -60px;
   right: 30px;
}
.description-text h2 {
   text-transform: uppercase;
   font-family: "Josefin Sans", sans-serif;
   font-weight: 300;
   font-size: 36px;
   margin-bottom: 15px;
}
.description-text p {
   color: var(--Grey_200);
   font-weight: 400;
   line-height: 20px;
}

/* Section 2 */
.creations-box {
   margin: 150px;
}
.creations-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 80px;
}
.creations-title h2 {
   text-transform: uppercase;
   font-family: "Josefin Sans", sans-serif;
   font-weight: 300;
   font-size: 36px;
}
.creations-title p {
   text-transform: uppercase;
   font-family: "Josefin Sans", sans-serif;
   font-size: 16px;
   border: 2px solid var(--Grey_200);
   padding: 13px 20px;
   cursor: pointer;
}
.creations-title p:hover {
   background-color: var(--Black);
   color: var(--White);
}
.grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   color: var(--White);
   text-transform: uppercase;
   font-family: "Josefin Sans", sans-serif;
   font-size: 28px;
}
.grid_pos {
   position: relative;
   cursor: pointer;
   transition: all 0.3s ease;
}
.grid_pos:hover {
   opacity: 0.6;
}
.grid_pos p {
   position: absolute;
   bottom: 50px;
   left: 30px;
   width: 149px;
}
.hide {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease;
   height: 0;
   overflow: hidden;
}

.hide.show {
   opacity: 1;
   visibility: visible;
   height: auto;
}

/* Footer */
footer {
   background-color: var(--Black);
   color: var(--White);
}
.logo-footer {
   margin: 0 150px;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.logo-footer .icon-footer img {
   margin-right: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
}
.logo-footer .icon-footer img:hover {
   border-bottom: 2px solid var(--White);
   padding-bottom: 5px;
}
.nav-footer {
   margin: 0 150px;
   padding: 0 20px 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.nav-footer p {
   color: var(--Grey_200);
}

/* Media queri */
@media (max-width: 376px) {
   body {
      width: 376px;
   }
   header {
      background-image: url("../images/mobile/image-hero.jpg");
      width: 375px;
   }
   .nav-box {
      display: block;
      padding: 50px 20px;
      margin: 0 0px;
   }
   .nav-box.active {
      display: block;
      background-color: black;
      height: 667px;
   }
   .nav-box .nav-mobile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 120px;
   }

   .nav-mobile-header .icon-close {
      display: none;
      width: 24px;
   }
   .nav-mobile-header .icon-close.active {
      display: flex;
   }

   .nav-mobile-header .icon-hamburger {
      display: initial;
   }

   .nav-mobile-header .icon-hamburger.disable {
      display: none;
   }

   /* .nav-header=== nav */
   .nav-header ul {
      display: none;
   }

   .nav-header ul.active {
      display: flex;
      flex-direction: column;
      gap: 20px;
      font-size: 26px;
      font-weight: 300;
   }

   header h1 {
      width: 220px;
      padding: 30px;
      font-size: 26px;
      position: absolute;
      left: 50px;
   }
   header h1.disable {
      /* none */
      display: none;
   }

   /* main */
   .desktop {
      display: none;
   }
   .mobile {
      display: block;
   }
   /* Section 1 */
   .description-box {
      margin: 50px 28px;
   }
   .description-box img {
      width: 320px;
      z-index: 1;
   }
   .description-text {
      margin-top: 40px;
      padding: 0px;
      width: 300px;
      position: initial;
      text-align: center;
   }

   /* Section 2 */
   .creations-box {
      margin: 50px 28px;
      position: relative;
      min-height: 900px;
      max-height: 1600px;
   }
   .creations-title {
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   .creations-title p {
      width: 150px;
      text-align: center;
      position: absolute;
      bottom: 0;
   }
   .grid {
      display: flex;
      flex-direction: column;
      gap: 20px;
   }
   .grid_pos img {
      height: 150px;
      width: 320px;
      object-position: center;
      object-fit: cover;
   }

   /* Footer */
   footer {
      background-color: var(--Black);
      color: var(--White);
      position: relative;
   }
   .logo-footer {
      margin: 0 50px;
      padding: 20px;
      display: flex;
      flex-direction: column;
   }
   .icon-footer {
      position: absolute;
      bottom: 100px;
   }

   .nav-footer {
      margin: 0 0;
      padding: 0 20px 30px;
      display: flex;
      flex-direction: column;
   }
   .nav-footer nav {
      margin-bottom: 120px;
   }
   .nav-footer nav ul {
      display: flex;
      flex-direction: column;
      gap: 20px;
   }
}