@import url("base.css");

/* Real project captures. Desktop and mobile views are composed into each asset. */
.security-preview {
  background-image: url("assets/projects/aws-posture-responsive.webp");
}

.operations-preview {
  background-image: url("assets/projects/weather-power-responsive.webp");
}

.resume-preview {
  background-image: url("assets/projects/cloud-resume-responsive.webp");
}

.project-directory article:nth-child(2)::before {
  background-image: url("assets/projects/vampire-ascension-responsive.webp");
}

/* Tighten the opening composition before adding any decorative banner. */
.hero {
  padding: clamp(2.75rem, 5vw, 4.75rem) 0 clamp(3.75rem, 6vw, 5.5rem);
}

/*
 * Keep the full responsive composites visible on narrow screens.
 * `cover` crops the phone capture from the right side of the image;
 * `contain` preserves both the desktop and mobile views.
 */
@media (max-width: 700px) {
  .hero {
    padding-top: 2.5rem;
  }

  .security-preview,
  .operations-preview,
  .resume-preview {
    background-position: center;
    background-size: contain;
  }
}