/* ------------------------------------------------------------
   Project Device Showcase
------------------------------------------------------------ */

.project-showcase {
  overflow:hidden;
}

.project-showcase .section-heading {
  max-width:800px;
  margin-bottom:clamp(2.8em, 5vw, 4.8em);
}

.project-showcase .section-heading h2 {
  font-size: clamp(1.3rem, calc(0.8rem + 1.4vw), 2.2rem);
  font-weight:400;
}

.project-showcase .section-heading p {
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  font-size:0.95rem;
}


/* Stage */

.project-device-stage {
  position:relative;
  /*max-width:1280px;*/
  min-height:clamp(400px, 44vw, 625px);
  margin:0 auto;
}


/* Device items */

.project-device {
  position:absolute;
  margin:0;
  text-align:center;
}

.project-device--desktop {
  width: min(50%, 650px);
  left: 25%;
  bottom: 0;
  z-index:1;
}
.project-device--desktop .project-device__mockup {
    padding-bottom: 10%;
}

.project-device--laptop {
  width:min(47%, 600px);
  left:0;
  bottom: 0;
  z-index:3;
}

.project-device--tablet {
  width:min(24%, 300px);
  right:2%;
  bottom: 0;
  z-index:4;
}
.project-device--tablet .project-device__mockup {
    padding-bottom: 4%;
}

.project-device--mobile {
  width:min(11.5%, 148px);
  right:27%;
  bottom:0;
  z-index:5;
}
.project-device--mobile .project-device__mockup {
    padding-bottom: 5%;
}


/* Mockup structure */

.project-device__mockup {
  position:relative;
  line-height:0;
}

.project-device__screen {
  position:absolute;
  z-index:1;
  overflow:hidden;
  background:#fff;
}

.project-device__screen img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

.project-device__frame {
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}


/* Screen placement inside each PNG frame */

.project-device--desktop .project-device__screen {
  left: 2.15%;
  top: 3.3%;
  width: 95.7%;
  height: 57.2%;
}

.project-device--laptop .project-device__screen {
  left: 16.67%;
  top: 6.1%;
  width: 66.67%;
  height: 66%;
}

.project-device--tablet .project-device__screen {
  left: 13.1%;
  top: 4.2%;
  width: 73.4%;
  height: 86.5%;
  border-radius:4px;
}

.project-device--mobile .project-device__screen {
  left: 12.5%;
  top: 2%;
  width: 75.4%;
  height: 91%;
  border-radius:14px;
}


/* Captions */

.project-device figcaption {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  margin-top:.95em;
  color:#444;
  font-size:.95rem;
  font-weight:600;
  line-height:1.4;
}

.project-device__icon {
  width:17px;
  height:17px;
  flex:0 0 17px;
  filter: var(--mwd-filter-gold);
}


/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media only screen and (max-width:980px) {

  .project-device-stage {
    position:static;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:3em 1.5em;
    max-width:760px;
    min-height:0;
    align-items:end;
  }

  .project-device {
    position:relative;
    inset:auto;
    width:100%;
    justify-self:center;
  }

  .project-device--tablet {
    width:78%;
  }

  .project-device--mobile {
    width:60%;
  }

}

@media only screen and (max-width:600px) {

  .project-showcase .section-heading {
    margin-bottom:2.8em;
  }

  .project-device-stage {
    grid-template-columns:1fr;
    gap:3em;
    max-width:430px;
  }

  .project-device--desktop,
  .project-device--laptop {
    width:100%;
  }

  .project-device--tablet {
    width:80%;
  }

  .project-device--mobile {
    width:54%;
  }

  .project-device figcaption {
    margin-top:.8em;
  }

}