/* ----- showcase ----- */
.showcase-bvh {
  min-height: 100vh;
  /* min-height: 100dvh; */
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/models/by-vianney-halter/DSC_8660.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  padding: 5% 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: flex-end;
}
.showcase-bvh img {
  height: 53px;
  width: auto;
  margin-bottom: 30px;
}

.showcase-bvh-content {
  text-align: center;
}

#section-side-wide {
  background-image: url("/assets/photos/models/by-vianney-halter/DSC_8721_crop.jpg");
}

/* ----- section imgs with gradient ----- */
#section-bvh-collaboration .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/models/by-vianney-halter/DSC_8629.jpg");
}
#section-bvh-collaboration .img-gradient {
  display: none;
}
#section-bvh-clarity .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/models/by-vianney-halter/DSC_8673.jpg");
}
#section-bvh-dial .section-img-wg {
  background-image: linear-gradient(
      -90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/models/by-vianney-halter/duke-bvh-1.jpg");
}
#section-bvh-mechanism .section-img-wg {
  background-image: linear-gradient(
      90deg,
      rgb(0, 0, 0, 0) 50%,
      rgb(0, 0, 0) 100%
    ),
    url("/assets/photos/models/by-vianney-halter/DSC_8680.jpg");
}

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

@media (max-width: 1600px) {
  /* ----- showcase ----- */
  .showcase-bvh {
    grid-template-columns: repeat(1, 1fr);
    padding: 5% 7%;
    justify-items: flex-start;
  }
}
@media (max-width: 1100px) {
  /* ----- showcase ----- */
  .showcase-bvh img {
    height: 47px;
  }
}
@media (max-width: 992px) {
  /* section duo img */
  #bvh .section-duo-img {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  /* ----- showcase ----- */
  .showcase-bvh {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 50%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/models/by-vianney-halter/DSC_8660_crop.jpg");

    /* grid-template-columns: repeat(1, 1fr); */
    justify-items: center;
  }
  .showcase-bvh img {
    height: 42px;
  }

  #section-side-wide {
    background-image: url("/assets/photos/models/by-vianney-halter/DSC_8721_mobile.jpg");
  }
}

@media (max-width: 576px) {
  /* ----- section imgs with gradient ----- */
  #section-bvh-collaboration .section-img-wg {
    background-image: url("/assets/photos/models/by-vianney-halter/DSC_8629.jpg");
  }
  #section-bvh-collaboration .img-gradient {
    display: block;
  }
  #section-bvh-clarity .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/models/by-vianney-halter/DSC_8673.jpg");
  }
  #section-bvh-dial .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/models/by-vianney-halter/duke-bvh-1.jpg");
  }
  #section-bvh-mechanism .section-img-wg {
    background-image: linear-gradient(
        180deg,
        rgb(0, 0, 0, 0) 40%,
        rgb(0, 0, 0) 100%
      ),
      url("/assets/photos/models/by-vianney-halter/DSC_8680.jpg");
  }

  /* ----- section custom text positions */
  #section-bvh-collaboration .section-content {
    padding-top: 20vh;
    /* padding-top: 20dvh; */
  }
  #section-bvh-clarity .section-content {
    padding-top: 30vh;
    /* padding-top: 30dvh; */
  }
  #section-bvh-dial .section-content {
    padding-top: 25vh;
    /* padding-top: 25dvh; */
  }
  #section-bvh-mechanism .section-content {
    padding-top: 25vh;
    /* padding-top: 25dvh; */
  }

  /* separator highlight */
  .separator-highlight {
    min-height: 65vh;
  }
  /*  */
  #section-side-wide {
    background-size: 150%;
  }
}
@media (max-width: 400px) {
  .showcase-bvh img {
    height: auto;
    width: 70%;
    max-width: 251px;
  }
}