/* x section */
.section-duo-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.x-section {
  display: grid;
}

.x-img {
  grid-area: 1/1 / span 1 / span 1;
}
.x-content {
  grid-area: 1/1 / span 1 / span 1;
}

.img-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.img-content {
  display: grid;
  justify-content: center;
  align-items: center;
}

.section-content {
  padding-right: 30%;
}
.section-content-right {
  padding-right: 0;
  padding-left: 30%;
}

/* remove p margin */
.section-duo p:last-of-type {
  margin-bottom: 0;
}
/* adjust jbtn margin */
#home .section-content .jbtn {
  margin-top: 40px;
}

/* x float */
#x {
  position: relative;
}
#x h3 {
  margin-bottom: 0;
}
.float-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-35%) translateY(-50%);
}

/* lion */
#brand-lion {
  background: linear-gradient(132deg, rgb(30, 30, 30) 0%, rgb(27, 27, 27) 100%);
}
#brand-lion img {
  width: 150px;
  height: auto;
}

#brand-lion h4 {
  font-size: 1.3rem;
  letter-spacing: 0.15em;
}

/* brand */
#brand .section-img {
  background-image: url("/assets/photos/home/DSC_8081.jpg");
}

/* identity */
#identity .section-img {
  /* background-size: contain; */
  background-position: left;
}

/* #identity .img-gradient.gradient-right {
  background: linear-gradient(90deg, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
  left: 0;
} */

/* separator brand */
.section-brand {
  min-height: 100vh;
  /* min-height: 100dvh; */
  display: grid;
  justify-items: center;
  align-items: center;
  padding: 100px 50px;
  background: rgb(122, 122, 122);
  background: linear-gradient(132deg, rgb(30, 30, 30) 0%, rgb(27, 27, 27) 100%);
  background: linear-gradient(132deg, rgb(30, 30, 30) 0%, rgb(16, 16, 16) 100%);
  background: linear-gradient(132deg, rgb(20, 20, 20) 0%, rgb(0, 0, 0) 100%);
}

.section-brand img {
  width: 35%;
  min-width: 130px;
  max-width: 350px;
  height: auto;
}

/*  */
.section-insta-embed {
  min-height: 100vh;
  padding: 50px;
  display: grid;
  justify-content: center;
  align-items: center;
}

/* ---------- MEDIA QUERIES ---------- */

@media (max-width: 992px) {
  .section-content {
    padding-right: 20%;
  }
  .section-content-right {
    padding-right: 0;
    padding-left: 20%;
  }

  /* duo img */
  .section-duo-img {
    grid-template-columns: 1fr;
  }
  .float-content {
    transform: translateX(-35%) translateY(-46%);
  }
  #x h3 {
    font-size: 2.8rem;
  }

  #x .parallax-ukiyo {
    min-height: 50vh;
    /* min-height: 50dvh; */
  }
}
@media (max-width: 768px) {
  .section-content {
    padding-right: 15%;
  }
  .section-content-right {
    padding-right: 0;
    padding-left: 15%;
  }
}
@media (max-width: 650px) {
  #x h3 {
    font-size: 2.2rem;
  }
}

@media (max-width: 576px) {
  /* fonts */
  h2 {
    font-size: 2rem;
  }
  /* sections */
  .section-duo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .section-content,
  .section-content-right {
    padding-right: 15%;
    padding-left: 15%;

    z-index: 3;
  }
  /* ----- section gradient ----- */
  .img-gradient {
    background: linear-gradient(180deg, rgb(0, 0, 0, 0) 40%, rgb(0, 0, 0) 100%);
    left: 0;
    width: 100%;
  }
  .img-gradient.gradient-right {
    background: linear-gradient(180deg, rgb(0, 0, 0, 0) 40%, rgb(0, 0, 0) 100%);
  }
  /* showcase */
  .showcase .section-img {
    grid-area: 1/1 / span 2 / span 1;
  }
  .showcase .section-content {
    grid-area: 1/1;
  }
  .showcase .img-gradient {
    background: linear-gradient(180deg, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
    left: 0;
    width: 100%;
  }

  /* collection */
  #collection .section-content {
    padding-bottom: 100px;
  }

  /* brand */
  #brand .section-img {
    background-image: url("/assets/photos/home/DSC_8081_crop_mobile.jpg");
  }

  /* manufacture - section custom mobile */
  #manufacture {
    /* overflow-x: hidden; */
  }
  .section-custom-mobile.section-duo {
    /* grid-template-rows: 50dvh 50dvh auto; */
    grid-template-rows: 50vh 50vh auto;
  }
  /* section custom mobile */
  .section-custom-mobile .section-img {
    grid-area: 1/1 / span 2 / span 1;
  }
  .section-custom-mobile .section-content {
    grid-area: 2/1 / span 2 / span 1;
    padding-bottom: 100px;
  }
  /* section custom right */
  .section-custom-mobile .section-img {
    grid-area: 1/1 / span 2 / span 1;
  }
  .section-custom-mobile .section-content {
    grid-area: 2/1 / span 2 / span 1;
    padding-bottom: 100px;
  }
  /* section custom content position */
  .showcase.section-custom-mobile.section-duo {
    /* grid-template-rows: 60dvh 10dvh auto; */
    grid-template-rows: 60vh 10vh auto;
  }
  .showcase .section-content {
    /* padding-top: 30vh;
    padding-top: 30dvh; */
    padding-top: 0;
  }
  #brand .section-content {
    padding-top: 25vh;
    /* padding-top: 25dvh; */
  }
  #identity .section-content {
    padding-top: 25vh;
    /* padding-top: 25dvh; */
  }
  #manufacture .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
}

@media (max-width: 480px) {
  /* fonts */
  /* h1{
    font-size: 2.2rem;
  } */
  h2 {
    font-size: 1.9rem;
  }
  /* sections */
  .section-content,
  .section-content-right {
    padding-right: 10%;
    padding-left: 10%;
  }
}
@media (max-width: 450px) {
  /* x section */
  #x h3 {
    font-size: 1.8rem;
  }
}
@media (max-width: 400px) {
  /* fonts */
  h2 {
    font-size: 1.8rem;
  }
  /* #manufacture h2 {
      font-size: 1.6rem;
    } */
  /* sections */
  .section-content,
  .section-content-right {
    padding-right: 30px;
    padding-left: 30px;
  }
}
@media (max-width: 380px) {
  /* x section */
  #x h3 {
    font-size: 1.6rem;
  }
}
@media (max-width: 340px) {
  /* x section */
  #x h3 {
    font-size: 1.3rem;
  }
}
@media (max-width: 300px) {
  /* fonts */
  h2 {
    font-size: 1.6rem;
  }
  /* sections */
  .section-content,
  .section-content-right {
    padding-right: 15px;
    padding-left: 15px;
  }
}