/* Responsive art direction for Moundir's real portrait. */
.photo {
  inset: -4% -3% -4% 45%;
  background-position: 58% 27%;
  background-size: cover;
  transform: scale(1.08) translateX(5%);
  transform-origin: 82% 42%;
}

.bleed {
  background:
    linear-gradient(90deg,#030918 0%,#030918 34%,rgba(3,9,24,.97) 42%,rgba(7,25,62,.82) 49%,rgba(24,59,139,.38) 56%,rgba(61,124,255,.12) 63%,transparent 72%),
    linear-gradient(0deg,rgba(3,9,24,.70),transparent 44%);
}

.bleed::after { left: 52%; width: 15%; opacity: .85; }

@media (min-width: 701px) and (max-width: 1100px) {
  .photo {
    inset: -2% -10% -2% 40%;
    background-position: 59% 25%;
    transform: scale(1.13) translateX(8%);
    transform-origin: 82% 34%;
  }
  .bleed {
    background:
      linear-gradient(90deg,#030918 0%,#030918 35%,rgba(3,9,24,.96) 44%,rgba(9,31,76,.72) 53%,rgba(61,124,255,.12) 64%,transparent 75%),
      linear-gradient(0deg,rgba(3,9,24,.76),transparent 48%);
  }
  section { width: 64%; }
  h1 { font-size: clamp(4.4rem,8.2vw,6.4rem); }
}

@media (max-width: 700px) {
  .photo {
    inset: 0;
    background-position: 18% center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: #030918;
    filter: grayscale(1) contrast(1.04) brightness(1.22);
    transform: none;
  }
  .bleed {
    background:
      linear-gradient(90deg,#030918 0%,rgba(3,9,24,.97) 29%,rgba(5,17,43,.84) 39%,rgba(18,51,125,.34) 48%,rgba(61,124,255,.08) 56%,transparent 65%),
      linear-gradient(0deg,rgba(3,9,24,.96) 0%,rgba(3,9,24,.22) 58%,rgba(3,9,24,.18) 100%);
  }
  .bleed::after { left: 47%; width: 22%; }
  h1 { max-width: 57%; font-size: clamp(3.05rem,12.8vw,4.2rem); }
  p { max-width: 78%; }
}

@media (max-width: 430px) {
  .photo {
    right: 0;
    background-position: 17% center;
    transform: none;
  }
  h1 { max-width: 60%; }
}