/* ================================================================
   PORTFOLIO PROTOTYPE — SHARED STYLES

   The easiest values to experiment with are grouped in :root below.
   ================================================================ */

:root {
  --page-bg: #f4f4f2;
  --text: #202020;
  --muted: #5f5f5f;
  --footer-bg: #d7d7d5;
  --focus: #2f64ff;
  --content-width: 1050px;

  /* HOVER TWEAKS: change these to make cards move more or less. */
  --card-hover-lift: -7px;
  --card-hover-scale: 1.012;
  --card-hover-duration: 220ms;

  /* CLICK / PAGE TRANSITION TWEAKS: keep exit time in sync with app.js. */
  --page-exit-duration: 160ms;
  --page-enter-duration: 360ms;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text);
  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep Bootstrap's typography aligned with the site font. */
button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

.site-container {
  max-width: var(--content-width);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  padding: 0.7rem 0.95rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* ------------------------------ Navigation ------------------------------ */

.site-header {
  padding: 1rem 0;
}

.primary-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1rem;
}

.primary-nav a {
  padding: 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-underline-offset: 0.32rem;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  text-decoration: underline;
}

/* --------------------------------- Hero --------------------------------- */

.hero {
  padding: clamp(4.2rem, 10vw, 8.25rem) 0 clamp(4.7rem, 9vw, 7rem);
}

.hero-title {
  max-width: 850px;
  margin: 0 auto;
  font-size: clamp(2.85rem, 6.1vw, 5.15rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1.01;
}

.hero-line {
  display: block;
}

/* The fixed height keeps the title from jumping when weights change. */
.rotating-word-slot {
  display: flex;
  min-height: 1.08em;
  align-items: center;
  justify-content: center;
}

/*
  ROTATING WORD FADE
  Change WORD_FADE_MS in assets/app.js to adjust the 300ms duration.
  Change "ease-in-out" below to experiment with the feel of the fade.
*/
.rotating-word {
  display: inline-block;
  min-width: 8.1ch;
  opacity: 1;
  text-align: center;
  white-space: nowrap;
  transition: opacity var(--word-fade-duration, 300ms) ease-in-out;
}

.rotating-word.is-fading-out {
  opacity: 0;
}

.hero-copy {
  max-width: 790px;
  margin: 1.45rem auto 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.35;
}

.hero-links {
  margin-top: 1.65rem;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.hero-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.hero-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* ----------------------------- Portfolio grid ---------------------------- */

.work-section {
  padding: 0 0 clamp(6rem, 11vw, 10rem);
}

.section-title {
  margin-bottom: clamp(2rem, 4vw, 3.1rem);
  font-size: clamp(2.2rem, 4.3vw, 3.35rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  text-align: center;
}

.project-card {
  --card-tilt: -0.4deg;
  position: relative;
  display: block;
  isolation: isolate;
  color: var(--text);
  text-decoration: none;
  transform: translateY(0) rotate(0);
  transition:
    transform var(--card-hover-duration) cubic-bezier(.2, .75, .25, 1),
    opacity var(--card-hover-duration) ease;
}

.project-column:nth-child(even) .project-card {
  --card-tilt: 0.4deg;
}

.project-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 720 / 450;
  container-type: inline-size;
  border-radius: 0.55rem;
  background: var(--project-color, #d3d9e8);
  box-shadow: 0 1px 0 rgb(0 0 0 / 3%);
  transition:
    box-shadow var(--card-hover-duration) ease,
    filter var(--card-hover-duration) ease;
}

/*
  PROJECT COVER IMAGE
  Images fill the card. Change object-fit to "contain" if you ever want the
  entire image visible with empty space around it.
*/
.project-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.2, .75, .25, 1);
}

/*
  PROJECT TEXT OVERLAY
  The title and roles are centered over the image, following the treatment in
  the supplied example. The dark wash and text shadow maintain readable white
  text across varied artwork.

  FONT SIZE: adjust the middle "cqi" values to change how quickly text scales
  with the card. The first value is the minimum, so neither line drops below
  16px. Browsers without container-query units use the rem fallback directly
  above each clamp() declaration.
*/
.project-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  padding: clamp(1.25rem, 6cqi, 3rem);
  background: linear-gradient(180deg, rgb(1 10 20 / 4%), rgb(1 10 20 / 18%));
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 14px rgb(0 0 0 / 55%);
  pointer-events: none;
  transition: background var(--card-hover-duration) ease;
}

.project-title {
  max-width: 95%;
  margin: 0;
  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2rem;
  font-size: clamp(1.25rem, 7cqi, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.project-roles {
  max-width: 95%;
  margin: 0.55rem 0 0;
  color: inherit;
  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-size: clamp(1rem, 3.5cqi, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}

/* Decorative circle used for the playful hover and click animation. */
.project-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: -4.25rem;
  bottom: -4.25rem;
  width: 9.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  opacity: 0;
  transform: scale(0.45);
  transition:
    opacity var(--card-hover-duration) ease,
    transform 420ms cubic-bezier(.2, .85, .2, 1);
}

.project-art::after {
  content: "↗";
  position: absolute;
  z-index: 5;
  right: 1rem;
  bottom: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  opacity: 0;
  transform: translate(-0.4rem, 0.4rem) rotate(-14deg);
  transition:
    opacity var(--card-hover-duration) ease,
    transform var(--card-hover-duration) ease;
}



/* SIMPLE HOVER EFFECT — adjust the variables at the top of this file. */
.project-card:hover,
.project-card:focus-visible {
  transform: translateY(var(--card-hover-lift)) scale(var(--card-hover-scale)) rotate(var(--card-tilt));
}

.project-card:hover .project-art,
.project-card:focus-visible .project-art {
  box-shadow: 0 18px 42px rgb(0 0 0 / 12%);
  filter: saturate(1.06);
}

/* IMAGE HOVER ZOOM — change 1.025 to make the zoom stronger or weaker. */
.project-card:hover .project-image,
.project-card:focus-visible .project-image {
  transform: scale(1.025);
}

.project-card:hover .project-overlay,
.project-card:focus-visible .project-overlay {
  background: linear-gradient(180deg, rgb(1 10 20 / 8%), rgb(1 10 20 / 24%));
}

.project-card:hover .project-art::before,
.project-card:focus-visible .project-art::before {
  opacity: 1;
  transform: scale(1);
}

.project-card:hover .project-art::after,
.project-card:focus-visible .project-art::after {
  opacity: 1;
  transform: translate(0, 0) rotate(0);
}

/*
  CLICK ANIMATION — the small local script adds .is-opening before navigating.
  Increase scale/rotation here for more drama; keep it subtle for now.
*/
.project-card.is-opening {
  z-index: 20;
  transform: translateY(-12px) scale(1.04) rotate(var(--card-tilt));
}

.project-card.is-opening .project-art {
  box-shadow: 0 30px 70px rgb(0 0 0 / 18%);
}

.project-card.is-opening .project-art::before {
  opacity: 1;
  transform: scale(3.2);
}

.project-card.is-opening .project-art::after {
  opacity: 1;
  transform: translate(0, 0) rotate(8deg) scale(1.15);
}

/*
  The project click transition is intentionally local to the selected card.
  Earlier versions faded the rest of the page away; browsers could preserve
  that temporary state in their Back/Forward cache. Keeping the rest of the
  page untouched prevents a cached "single thumbnail" view.
*/


/* ---------------------------- Back to top ------------------------------- */

/*
  BACK TO TOP LINK
  This is generated on every page immediately above the footer.
  Change the padding below to add/remove breathing room, or adjust font-size
  and opacity if you want the link to be more or less prominent.
*/
.back-to-top-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
}

.back-to-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.28rem;
  opacity: 0.78;
  transition: opacity 180ms ease, transform 180ms ease;
}

.back-to-top-link:hover,
.back-to-top-link:focus-visible {
  color: var(--text);
  text-decoration: underline;
  opacity: 1;
  transform: translateY(-2px);
}

/* -------------------------------- Footer -------------------------------- */

.site-footer {
  /* FOOTER HEIGHT — adjust this padding to make the footer taller or shorter. */
  padding: 2.375rem 0;
  background: var(--footer-bg);
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 0.95rem;
  text-transform: none;
}

/* ------------------------------ Inner pages ------------------------------ */

.inner-header {
  padding: 1.2rem 0;
}

/* Project pages keep the main navigation and place the back link beneath it. */
.project-site-header {
  padding-bottom: 0;
}

.project-back-row {
  padding-top: 0.65rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.28rem;
}

.back-arrow {
  display: inline-block;
  transition: transform 180ms ease;
}

.back-link:hover .back-arrow {
  transform: translateX(-4px);
}

.inner-main {
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(6rem, 10vw, 9rem);
}

.inner-kicker {
  margin-bottom: 0.8rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.inner-title {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3rem, 7vw, 6.2rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.inner-lede {
  max-width: 760px;
  margin: 1.7rem 0 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
}

.content-panel {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 36%);
}

.content-panel h2,
.content-panel h3 {
  font-weight: 500;
}

.sketchbook-card {
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 30%);
  transition:
    transform var(--card-hover-duration) cubic-bezier(.2, .75, .25, 1),
    box-shadow var(--card-hover-duration) ease;
}

.sketchbook-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgb(0 0 0 / 9%);
}

.placeholder-tile {
  min-height: 210px;
  background: var(--tile-color, #d7dce8);
}

.sketchbook-copy {
  padding: 1.1rem 1.1rem 1.25rem;
}

.sketchbook-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.sketchbook-description {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* -------------------------- Leadership page ----------------------------- */

.leadership-intro {
  max-width: 900px;
}

.leadership-lede {
  max-width: 820px;
}

.leadership-statement {
  max-width: 820px;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.65;
}

.recommendations {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.recommendations-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.recommendation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 9%);
  border-radius: 0.9rem;
  background: rgb(255 255 255 / 40%);
}

.quote-mark {
  height: 2.5rem;
  color: rgb(32 32 32 / 18%);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.8;
}

.recommendation-card blockquote {
  flex: 1;
  margin: 1.1rem 0 2rem;
  font-size: 1rem;
  line-height: 1.65;
}

.recommendation-person {
  display: grid;
  gap: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(0 0 0 / 9%);
}

.recommendation-person strong {
  font-size: 1rem;
}

.recommendation-person span {
  color: var(--muted);
  font-size: 0.86rem;
}

/* ------------------------------ Project page ----------------------------- */

.project-page {
  --project-color: #d3d9e8;
  --project-accent: #7b86a8;
}

.project-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.25rem);
  border-radius: 1rem;
  background: var(--project-color);
  animation: project-enter var(--page-enter-duration) cubic-bezier(.16, 1, .3, 1) both;
}

/* Playful decorative shapes. They are CSS only and easy to remove. */
.project-intro::before,
.project-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgb(255 255 255 / 50%);
}

.project-intro::before {
  top: -7rem;
  right: -4rem;
  width: 18rem;
  aspect-ratio: 1;
  animation: float-shape 5s ease-in-out infinite alternate;
}

.project-intro::after {
  right: 13%;
  bottom: -4rem;
  width: 8rem;
  aspect-ratio: 1;
  background: rgb(255 255 255 / 24%);
  animation: float-shape 4s 250ms ease-in-out infinite alternate-reverse;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.project-chip {
  padding: 0.42rem 0.72rem;
  border: 1px solid rgb(0 0 0 / 16%);
  border-radius: 999px;
  background: rgb(255 255 255 / 44%);
  font-size: 0.82rem;
  font-weight: 700;
}

.project-body {
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.project-body h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.project-body p {
  color: #3f3f3f;
  line-height: 1.65;
}

.project-quote {
  margin: 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-left: 4px solid var(--project-accent);
  border-radius: 0 0.75rem 0.75rem 0;
  background: rgb(255 255 255 / 48%);
}

.project-quote blockquote {
  margin: 0 0 1rem;
  color: #2f2f2f;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
}

.project-quote figcaption {
  color: #555;
  font-size: 0.92rem;
  font-weight: 500;
}

.project-placeholder-image {
  display: grid;
  min-height: clamp(280px, 45vw, 520px);
  place-items: center;
  margin-top: 2rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 35%), transparent 60%),
    var(--project-color);
  font-weight: 700;
  text-transform: uppercase;
}

/* PROJECT ARRIVAL ANIMATION — tweak translate/rotate for a different entrance. */
@keyframes project-enter {
  from {
    opacity: 0;
    transform: translateY(28px) rotate(-1.2deg) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes float-shape {
  from { transform: translate3d(0, 0, 0) rotate(0); }
  to { transform: translate3d(-18px, 14px, 0) rotate(12deg); }
}

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

@media (max-width: 767.98px) {
  .primary-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem 1rem;
  }

  .hero {
    padding-top: 4rem;
  }

  .hero-title {
    font-size: clamp(2.65rem, 12.5vw, 4rem);
  }

  .rotating-word {
    min-width: 7.7ch;
  }

}

@media (max-width: 575.98px) {
  .site-container {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .hero-copy {
    letter-spacing: 0.015em;
  }

  .hero-link {
    font-size: 1.05rem;
  }

  .project-intro {
    border-radius: 0.8rem;
  }
}

/* Respect accessibility preferences and keep everything usable. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   SHARED HEADER + FOOTER

   The build script writes the shared markup into every finished HTML page.
   Edit source/site.json for content and these styles for appearance.
   ======================================================================== */

.page-back-row {
  padding-top: 0.4rem;
}

.footer-link {
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 0.25rem;
}

.footer-link:hover,
.footer-link:focus-visible {
  text-decoration: underline;
}

.footer-secondary {
  margin-top: 0.75rem !important;
  font-size: 0.8rem !important;
  text-transform: none !important;
}

/* ========================================================================
   ACTIVE NAVIGATION STATE

   The build script adds aria-current="page" and the .is-active class to the
   current section. Adjust the background, radius, or shadow below to change
   how prominently the active page is highlighted.
   ======================================================================== */
.primary-nav a.is-active,
.primary-nav a[aria-current="page"] {
  border-radius: 999px;
  /* Figma equivalent: #B2D9FF at 60% opacity. */
  background: rgb(178 217 255 / 60%);
  box-shadow: inset 0 0 0 1px rgb(82 145 208 / 10%);
  text-decoration: none;
}

.primary-nav a.is-active:hover,
.primary-nav a[aria-current="page"]:hover {
  background: rgb(178 217 255 / 78%);
}

/* Make the full Sketchbook card clickable. */
.sketchbook-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sketchbook-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.sketchbook-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sketchbook-cta {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.86rem;
  font-weight: 700;
}

/* ========================================================================
   SKETCHBOOK DETAIL PAGE

   The image occupies the wide left column on desktop and moves above the
   title/description on mobile. Change the Bootstrap column classes in
   source/templates/sketchbook-item.html to adjust the column proportions.
   ======================================================================== */
.sketch-detail-main {
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

/*
   SKETCHBOOK IMAGE SIZING
   Detail artwork keeps its original aspect ratio so paintings, portraits,
   logos, and UI screenshots are never cropped. The 0.5rem radius equals
   8px at the browser's standard 16px root size.
*/
.sketch-detail-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: contain;
}

.sketch-detail-gallery {
  align-items: start;
}

.sketch-detail-figure {
  margin: 0;
}

.sketch-detail-caption {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.sketch-detail-placeholder {
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--tile-color, #d7dce8);
  color: rgb(32 32 32 / 62%);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 500;
  text-align: center;
  animation: sketch-detail-enter 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.sketch-detail-copy {
  position: sticky;
  top: 2rem;
  padding: 0.5rem 0;
}

.sketch-detail-title {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.sketch-detail-description {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

@keyframes sketch-detail-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 991.98px) {
  .sketch-detail-copy {
    position: static;
  }

}


/* ============================================================
   PROJECT IMAGE GALLERIES
   Project copy appears first; gallery imagery follows it.

   CORNER RADIUS:
   0.5rem = 8px at the browser's normal 16px root font size.
   Change --project-image-radius below if you want more or less rounding.
   ============================================================ */
.project-gallery {
  --project-image-radius: 0.5rem;
  margin-top: clamp(3rem, 7vw, 5.5rem);
}

.project-gallery-full + .project-gallery-full,
.project-gallery-full + .project-gallery-row,
.project-gallery-row + .project-gallery-full,
.project-gallery-row + .project-gallery-row {
  margin-top: 1.5rem;
}

.project-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--project-image-radius);
}

.project-gallery-row .project-gallery-image {
  height: 100%;
  object-fit: cover;
}