/* ----- secondary showcase ----- */
.showcase-secondary {
  min-height: 100vh;
  /* min-height: 100dvh; */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  position: relative;
}
.showcase-secondary-gradient {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;

  background: linear-gradient(2700deg, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
}
.showcase-secondary-overlay {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -1;

  background-color: black;
  opacity: 0.5;
}
.showcase-secondary-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  /* min-height: 100dvh; */

  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.showcase-content-flex {
  grid-row: 3;
  /* display: flex; */
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  align-items: center;
  gap: 50px;
  padding: 50px 10% 50px 50px;

  position: relative;
}
.showcase-secondary-title {
  display: grid;
  justify-content: center;
}

/* showcsae fonts */
.showcase-secondary h6 {
  margin-bottom: 10px;
}
.showcase-secondary h1,
.showcase-secondary h2,
.showcase-secondary p {
  margin: 0;
}

/* showcase secondary lines */
.showcase-secondary .vline {
  height: 100%;
}
.showcase-secondary .underline,
.showcase-secondary .hline,
.separator-mgd .hline {
  display: none;
}

/* ----- selection wrapper ----- */
#about.wrapper {
  padding: 150px 25%;
}

/* ----- selection grid ----- */
.about-grid {
  display: grid;
  gap: 60px;
}

.about-box {
  height: 50vh;
  min-height: 280px;
  max-height: 600px;
  /* min-height: 70dvh; */
  padding: 100px;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  position: relative;

  display: grid;
  align-content: center;
}

.about-box-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;

  background: linear-gradient(-90deg, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
  opacity: 0.85;
}
.about-box-content {
  position: relative;
  z-index: 2;
}

/* ----- fonts & links ----- */
#about h6 {
  margin-bottom: 10px;
}

#about a:hover {
  color: white;
}

/* ----- section custom ----- */
.section-custom {
  grid-template-columns: 45% 5% 50%;
}
.section-custom-right {
  grid-template-columns: 50% 5% 45%;
}
.section-custom .section-img,
.section-custom .section-img-wg {
  grid-area: 1/1 / span 1 / span 2;
}
.section-custom .section-content {
  grid-area: 1/2 / span 1 / span 2;
  z-index: 4;

  padding: 100px;
  padding-left: 0;
  padding-right: 40%;
}
.section-custom.section-custom-right .section-img,
.section-custom.section-custom-right .section-img-wg {
  grid-area: 1/2 / span 1 / span 2;
}
.section-custom.section-custom-right .section-content {
  grid-area: 1/1 / span 1 / span 2;
  z-index: 4;

  padding-right: 0;
  padding-left: 40%;
}

/* ----- identity ----- */
.section-chars {
  padding-bottom: 150px;
}
.chars-title {
  margin: 150px 20%;
}
.chars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 0 20%;
}
.char-box p {
  margin: 0;
}
.hline.area-mobile {
  display: none;
}

/* ----- manufacture ----- */
.separator-mgd {
  display: grid;
  grid-template-columns: 2fr auto 3fr;
  justify-items: center;
  align-items: center;
  gap: 80px;
  padding-right: 15%;
}
.separator-mgd img {
  width: 60%;
  min-width: 180px;
  max-width: 330px;
  height: auto;
}

/* manu fullscreen img 1 */
#duke-steel {
  background-image: url("/assets/photos/about/DSC_3277.jpg");
}

/* ----- [deprecated] history ----- */
#section-distinctive .gradient-right {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 90%);
}

/* ----- section imgs with gradient -------------------------------------------------- */

/* brand */
#section-duke .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_4459.jpg");
}
#section-craftsmen .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_3567.jpg");
}
/* identity */
#section-tradition .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_4252.jpg");
}
#section-tourbillon .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_4280.jpg");
}
#section-rotor .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_8457.jpg");
}
#section-reversity .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_8895.jpg");
}
/* manufacture */
#section-manu .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    linear-gradient(180deg, rgb(0, 0, 0, 0) 33%, rgb(0, 0, 0) 100%),
    url("/assets/photos/about/DSC_3215.jpg");
}
#section-mastery .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_3332.jpg");
}
#section-perfection .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_3578.jpg");
}
#section-hand .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_4063.jpg");
}
#section-watchmakers .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_0858.jpg");
}

/* history */
#section-born .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    linear-gradient(180deg, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%),
    url("/assets/photos/about/DSC_5955.jpg");
}
#section-mentoring .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_5976.jpg");
}
#section-distinctive .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgb(0, 0, 0) 90%
    ),
    url("/assets/photos/about/DSC_5954.jpg");
}
#section-improving .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/about/DSC_5999.jpg");
}

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

@media (max-width: 1600px) {
  /* ----- selection wrapper ----- */
  #about.wrapper {
    padding: 150px 20%;
  }
}
@media (max-width: 1300px) {
  /* ----- section custom ----- */
  .section-custom .section-content {
    padding-right: 30%;
  }
  .section-custom.section-custom-right .section-content {
    padding-left: 30%;
  }
}
@media (max-width: 1200px) {
  /* ----- selection wrapper ----- */
  #about.wrapper {
    padding: 150px 15%;
  }
}
@media (max-width: 992px) {
  /* showcase */
  .showcase-content-flex {
    gap: 30px;
    padding: 50px 30px 50px 30px;
  }

  /* ----- section custom ----- */
  .section-custom .section-content {
    padding-right: 25%;
  }
  .section-custom.section-custom-right .section-content {
    padding-left: 25%;
  }
  /* manufacture */
  .separator-mgd {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    text-align: justify;
    gap: 80px;
    padding: 120px 30% 80px 30%;
  }
  /* separator mgd lines */
  .separator-mgd .vline {
    display: none;
  }
  .separator-mgd .hline {
    display: block;
    height: 4px;
    background-color: #c0c0c0;
    width: 100px;
  }
  /* identity */
  .chars-title {
    margin: 150px 15%;
  }
  .chars-grid {
    padding: 0 15%;
  }
}
@media (max-width: 900px) {
  /* ----- selection wrapper ----- */
  #about.wrapper {
    padding: 150px 10%;
  }
  .about-box {
    padding: 100px 10%;
  }
}
@media (max-width: 840px) {
  /* identity */
  .chars-title {
    margin: 150px 10%;
  }
  .chars-grid {
    padding: 0 10%;
  }
  /* manufacture */
  #manufacture .section-duo-img {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  /* ----- showcase secondary ----- */
  .showcase-secondary-content {
    /* grid-template-rows: 3fr 2fr; */
    grid-template-rows: 1fr;
  }
  .showcase-content-flex {
    grid-row: 2;
    grid-template-columns: 1fr;
    align-content: flex-end;
    gap: 40px;
    padding: 60px 15%;
  }
  .showcase-secondary-overlay {
    opacity: 0.6;
  }
  .showcase-secondary-title {
    justify-content: flex-start;
  }
  /* showcase-secondary lines */
  .showcase-secondary .vline {
    display: none;
  }
  .showcase-secondary .underline,
  .showcase-secondary .hline {
    display: block;
  }

  /* ----- custom showcase bgs ----- */
  /* showcase brand */
  #showcase-brand.showcase-secondary {
    background-position: bottom;
    background-size: 180%;
  }
  /* showcase identity */
  #showcase-identity.showcase-secondary {
    background-position: bottom;
    background-size: 180%;
  }

  /* ----- section custom ----- */
  .section-custom .section-content {
    padding-right: 20%;
  }
  .section-custom.section-custom-right .section-content {
    padding-left: 20%;
  }

  /* manufacture */
  .separator-mgd {
    padding: 120px 25% 80px 25%;
  }
  /* identity */
  .chars-title {
    margin: 150px 20%;
  }
  .chars-grid {
    grid-template-columns: 1fr;
    padding: 0 20%;
  }
  .hline.area-mobile-3 {
    grid-area: 3/1;
  }
  .hline.area-mobile-7 {
    grid-area: 7/1;
  }
  .hline.area-mobile {
    display: block;
  }
}
@media (max-width: 576px) {
  /* fonts */
  h1,
  h2 {
    /* initial */
    font-size: 2.2rem;
    /* responsive */
    font-size: 2rem;
  }
  h6 {
    font-size: 11px;
  }
  #identity h4 {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
  }
  /* ----- selection wrapper ----- */
  #about.wrapper {
    /* padding: 150px 10%; */
    padding: 150px 30px;
  }
  .about-box-overlay {
    background: linear-gradient(-90deg, rgb(0, 0, 0, 0) 20%, rgb(0, 0, 0) 100%);
  }
  /* ----- section custom ----- */
  .section-custom {
    grid-template-columns: auto;
    grid-template-rows: 50vh 50vh auto;
    /* grid-template-rows: 50dvh 50dvh auto; */
  }
  .section-custom-right {
    grid-template-columns: auto;
  }
  .section-custom .section-img,
  .section-custom .section-img-wg {
    grid-area: 1/1 / span 2 / span 1;
  }
  .section-custom .section-content {
    grid-area: 2/1 / span 2 / span 1;
    padding: 0 17%;
    padding-bottom: 100px;
  }
  /* section custom right */
  .section-custom.section-custom-right .section-img,
  .section-custom.section-custom-right .section-img-wg {
    grid-area: 1/1 / span 2 / span 1;
  }
  .section-custom.section-custom-right .section-content {
    grid-area: 2/1 / span 2 / span 1;
    padding: 0 17%;
    padding-bottom: 100px;
  }

  /* ----- [deprecated] -------------------------------------------------- */

  /* ----- 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%);
  }
  /* ----- history ----- */
  #section-distinctive .gradient-right {
    background: linear-gradient(180deg, rgb(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 90%);
  }

  /* ----- section imgs with gradient -------------------------------------------------- */

  /* brand */
  #section-duke .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_4459.jpg");
  }
  #section-craftsmen .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_3567.jpg");
  }
  /* identity */
  #section-tradition .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_4252.jpg");
  }
  #section-tourbillon .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_4280.jpg");
  }
  #section-rotor .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_8457.jpg");
  }
  #section-reversity .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_8895.jpg");
  }
  /* manufacture */
  #section-manu .section-img-wg {
    background-image: linear-gradient(
        90deg,
        rgb(0, 0, 0, 0) 50%,
        rgb(0, 0, 0) 100%
      ),
      linear-gradient(180deg, rgb(0, 0, 0, 0) 33%, rgb(0, 0, 0) 100%),
      url("/assets/photos/about/DSC_3215.jpg");
  }
  #section-mastery .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_3332.jpg");
  }
  #section-perfection .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_3578.jpg");
  }
  #section-hand .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_4063.jpg");
  }
  #section-watchmakers .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_0858.jpg");
  }

  /* history */
  #section-born .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_5955.jpg");
  }
  #section-mentoring .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_5976.jpg");
  }
  #section-distinctive .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 80%,
        rgb(0, 0, 0) 100%
      ),
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 90%),
      url("/assets/photos/about/DSC_5954.jpg");
  }
  #section-improving .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/about/DSC_5999.jpg");
  }

  /* ----- section custom text positions -------------------------------------------------- */
  #section-craftsmen .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-duke .section-content {
    padding-top: 15vh;
    /* padding-top: 15dvh; */
  }
  #section-tradition .section-content {
    padding-top: 15vh;
    /* padding-top: 15dvh; */
  }
  #section-tourbillon .section-content {
    padding-top: 15vh;
    /* padding-top: 15dvh; */
  }
  #section-rotor .section-content {
    padding-top: 28vh;
    /* padding-top: 28dvh; */
  }
  #section-reversity .section-content {
    padding-top: 22vh;
    /* padding-top: 22dvh; */
  }
  #section-manu .section-content {
    padding-top: 8vh;
    /* padding-top: 8dvh; */
  }
  #section-mastery .section-content {
    padding-top: 25vh;
    /* padding-top: 25dvh; */
  }
  #section-perfection .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-hand .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-watchmakers .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-born .section-content {
    padding-top: 25vh;
    /* padding-top: 25dvh; */
  }
  #section-mentoring .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-distinctive .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-improving .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }

  /* showcase */

  /* ----- identity ----- */
  #identity .separator-next {
    padding: 80px 80px;
  }
  .chars-title {
    margin: 50px 15% 100px 15%;
  }
  .chars-grid {
    padding: 0 15%;
  }

  /* ----- manufacture ----- */
  /* mgd */
  .separator-mgd {
    padding: 120px 20% 20px 20%;
  }
  /* fullscreen img 1 */
  #duke-steel {
    background-image: url("/assets/photos/about/DSC_3277-v.jpg");
  }
}
@media (max-width: 480px) {
  /* fonts */
  h1,
  h2 {
    font-size: 1.9rem;
  }
  /* showcase */
  .showcase-content-flex {
    gap: 30px;
    padding: 60px 10%;
  }
  /* ----- identity ----- */
  #identity .separator-next h2 {
    font-size: 1.5rem;
  }
  /* ----- selection wrapper ----- */
  #about.wrapper {
    padding: 150px 30px;
  }
  .about-box {
    padding: 100px 30px;
    height: 80vh;
  }
  #about h3 {
    font-size: 1.5rem;
  }
}
@media (max-width: 460px) {
  /* ----- section custom ----- */
  .section-custom .section-content,
  .section-custom.section-custom-right .section-content {
    padding-left: 10%;
    padding-right: 10%;
  }
  /* ----- identity ----- */
  .chars-title {
    margin: 50px 10% 100px 10%;
  }
  .chars-grid {
    padding: 0 10%;
  }
}
@media (max-width: 400px) {
  /* fonts */
  h1,
  h2 {
    font-size: 1.8rem;
  }
  /* ----- selection wrapper ----- */
  #about.wrapper {
    padding: 150px 30px;
  }
  /* showcase */
  .showcase-content-flex {
    padding: 60px 30px;
  }

  /* fonts */
  #showcase-manufacture h1,
  #showcase-manufacture h2 {
    font-size: 1.6rem;
  }
  /* showcase */
  #showcase-manufacture .showcase-content-flex {
    padding: 60px 15px;
  }
  /* ----- section custom ----- */
  .section-custom .section-content,
  .section-custom.section-custom-right .section-content {
    padding-left: 30px;
    padding-right: 30px;
  }
  /* ----- manufacture ----- */
  .separator-mgd {
    padding: 120px 15% 20px 15%;
  }
  /* ----- identity ----- */
  #identity .separator-next h2 {
    font-size: 1.3rem;
  }
  .chars-title {
    margin: 50px 30px 100px 30px;
  }
  .chars-grid {
    padding: 0 30px;
  }
}
@media (max-width: 300px) {
  /* fonts */
  h1,
  h2 {
    font-size: 1.6rem;
  }
  /* ----- selection wrapper ----- */
  #about.wrapper {
    padding: 150px 15px;
  }
  /* showcase */
  .showcase-secondary .underline {
    height: 4px;
  }
  .showcase-content-flex {
    padding: 60px 15px;
  }
  /* ----- section custom ----- */
  .section-custom .section-content,
  .section-custom.section-custom-right .section-content {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* ----- manufacture ----- */
  .separator-mgd {
    padding: 120px 30px 20px 30px;
  }
  /* ----- identity ----- */
  .chars-title {
    margin: 50px 15px 100px 15px;
  }
  .chars-grid {
    padding: 0 15px;
  }
}