.highlights {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
  align-items: center;
}

.highlights-icon {
  background-size: contain;
  background-repeat: no-repeat;
  width: 15vw;
  height: 15vw;
}

.highlights-details {
  width: 70%;
  padding: 0 4em;
  box-sizing: border-box;
}

.section-row {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
}

.section-row-cell-small {
  width: 40%;
  position: relative;
}
.section-row-cell-large {
  width: 60%;
  position: relative;
}
.section-row-cell.left {
  padding: 0 20px 0 0;
}

.section-row-cell.right {
  padding: 0 0 0 20px;
}

/* Absolute/rotated artwork helpers moved from inline styles in development.html */
.abs-img {
  position: absolute;
  width: 500px;
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 1em;
}

/* Specific placements */
.abs-img--aws-1 {
  transform: scale(1.2) rotate(15deg) translate(35px, -73px);
  background-image: url("/imgs/deadline/portal_ui.jpg");
}
.abs-img--aws-2 {
  transform: scale(1) rotate(-14deg) translate(140px, 164px);
  background-image: url("/imgs/deadline/portal_ui2.jpg");
}
.abs-img--aws-3 {
  transform: scale(0.8) rotate(6deg) translate(20px, 354px);
  background-image: url("/imgs/deadline/studio_setup.png");
}

/* Nimble */
.abs-img--nimble {
  transform: scale(1.1) rotate(5deg) translate(-55px, -43px);
  background-image: url("/imgs/companies/nimble-logo2.png");
  filter: grayscale(0.4) brightness(0.5);
}

/* RGB */
.abs-img--rgb {
  transform: scale(1.1) rotate(5deg) translate(105px, -53px);
  background-image: url("/imgs/rgb/rgb_sketch.jpg");
}

/* Scratt / BlueSky */
.abs-img--scratt {
  position: absolute;
  bottom: 0;
  transform: scale(1.6) rotate(0deg) translate(-45px, 148px);
  background-image: url("/imgs/companies/scratt-alpha.png");
  width: 500px;
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(0.4) brightness(0.5);
}

/* Small rotated posters used later in the page */
.rotated-card {
  width: 500px;
  height: 260px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 1em;
}
.rotated-card--1 {
  transform: scale(1) rotate(10deg) translate(80px, 0) scaleX(-1);
  background-image: url("/imgs/golden-compass_pan.jpg");
}
.rotated-card--2 {
  transform: scale(1) rotate(-3deg) translate(21px, 6px) scaleX(-1);
  background-image: url("/imgs/hulk_punch.jpg");
}
.rotated-card--3 {
  transform: scale(1) rotate(4deg) translate(110px, -7px) scaleX(-1);
  background-image: url("/imgs/lifeofpi-orangtan.png");
}

/* Utility */
.poster-img {
  width: 100%;
  border-radius: 4px;
}

/* Page-specific splash background */
.splash {
  background-image: url("/imgs/developBanner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Highlights icon variants (moved from inline) */
.highlights-icon--3dhand {
  background-image: url("/imgs/main/3dhand.webp");
}
.highlights-icon--pipe {
  background-image: url("/imgs/main/pipe.webp");
}
.highlights-icon--axis {
  background-image: url("/imgs/main/axisIcon_cropped.png");
}

/* Small utility for centered padded blocks */
.centered-pad {
  padding: 1em;
  text-align: center;
}

.header-w-icon {
  /* display: flex; */
  flex-direction: row;
  align-items: center;
}

/* Base: hide all responsive-only toggles */
.wide-only,
.narrow-only {
  display: none;
}

/* Wide screens */
@media (min-width: 751px) {
  :where(.wide-only) {
    display: flex !important;
  }
}

/* Narrow screens */
@media (max-width: 750px) {
  :where(.narrow-only) {
    display: flex !important;
  }
}

/* Narrow screens */
@media (max-width: 750px) {
  /* section.highlights {
    padding: 0 2em;
  } */

  .highlights-icon {
    display: none;
  }

  .highlights-details {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  .section-row {
    margin-top: 3em;
  }

  .section-row-cell-small {
    display: none;
  }
  .section-row-cell-large {
    width: 100%;
    position: relative;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .section-row-cell.left {
    padding: 0 10px 0 0;
  }

  .section-row-cell.right {
    padding: 0 0 0 10px;
  }

  .abs-img--nimble {
    transform: scale(1.1) rotate(5deg) translate(-165px, -43px);
  }

  .abs-img--nimble {
    transform: scale(1.1) rotate(5deg) translate(-165px, -43px);
  }

  section.highlights ul {
    display: none !important;
  }
}