/* =========================================================
   Projects — compact stacked cards + one reusable modal
   ========================================================= */

.projects-section {
  background: #f6f0e6;
  padding: 46px 0 120px;
}

.projects-stack {
  padding-top: 0;
}

/* =========================================================
   Outer project card
   Keep sticky/stack behavior; only improve size + composition.
   ========================================================= */
.project-showcase-card {
  --project-accent: #ffd65c;
  --project-surface: #fff8d8;

  position: sticky;
  top: calc(var(--header) + 20px);
  width: min(1120px, 94vw);
  min-height: 0;
  margin: 0 auto 11vh;
  padding: clamp(20px, 2.4vw, 30px);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "media";
  gap: clamp(18px, 2.3vw, 28px);
  align-items: start;

  border: 2px solid var(--ink);
  border-radius: 32px;
  background: var(--project-surface);
  box-shadow: 8px 9px 0 rgba(23, 23, 23, 0.12);

  transform-origin: center top;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.project-showcase-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(130px, 14vw, 210px);
  height: 18px;
  inset-inline-end: 7%;
  top: 14px;
  border-radius: 999px;
  background: var(--project-accent);
  transform: rotate(-3deg);
  opacity: 0.74;
}

.project-showcase-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 76px;
  height: 76px;
  inset-inline-start: -32px;
  bottom: -30px;
  border: 5px solid var(--project-accent);
  border-radius: 26px;
  transform: rotate(18deg);
  opacity: 0.58;
}

.project-showcase-card:hover {
  box-shadow: 10px 11px 0 rgba(23, 23, 23, 0.14);
}

.project-showcase-card:focus-visible {
  outline: 4px solid var(--project-accent);
  outline-offset: 5px;
}

.project-showcase-card__title {
  grid-area: title;
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 18px 10px 0;
  text-align: center;
}

.project-showcase-card__accent {
  display: block;
  width: 44px;
  height: 7px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--project-accent);
}

.project-showcase-card__title h3 {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  padding: 0.14em 0.04em 0.1em;
  font-family: "Baloo Bhaijaan 2", system-ui, sans-serif;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.project-showcase-card__media {
  grid-area: media;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.project-showcase-card__frame {
  height: clamp(360px, 43vw, 510px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 25px;
  background: #fff;
  box-shadow: 6px 7px 0 rgba(23, 23, 23, 0.12);
}

.project-showcase-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  transform: scale(1);
  transition: transform 0.32s var(--ease);
}

.project-showcase-card:hover .project-showcase-card__frame img {
  transform: scale(1.01);
}

/* =========================================================
   Project detail modal
   Full-width title on top, then fixed media + flexible description.
   ========================================================= */
.project-modal-v2 {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: none;
  place-items: center;
  padding: 18px;
}

.project-modal-v2.open {
  display: grid;
}

.project-modal-v2__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(18, 18, 18, 0.56);
}

.project-modal-v2__panel {
  --project-accent: #ffd65c;
  --project-surface: #fff8d8;

  position: relative;
  z-index: 2;
  width: min(1080px, 94vw);
  max-height: calc(100svh - 36px);
  overflow: auto;

  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  grid-template-areas:
    "title title"
    "media copy";
  gap: 20px clamp(26px, 3.4vw, 48px);
  align-items: start;

  padding: clamp(24px, 3vw, 36px);
  border: 2px solid var(--ink);
  border-radius: 30px;
  background: var(--project-surface);
  box-shadow: 10px 12px 0 rgba(23, 23, 23, 0.22);
}

html[dir="ltr"] .project-modal-v2__panel {
  grid-template-areas:
    "title title"
    "copy media";
}

.project-modal-v2__panel::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 18px;
  top: 13px;
  inset-inline-end: 9%;
  border-radius: 999px;
  background: var(--project-accent);
  transform: rotate(-3deg);
  opacity: 0.78;
}

.project-modal-v2__close {
  position: absolute;
  z-index: 8;
  top: 14px;
  inset-inline-start: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(23, 23, 23, 0.12);
}

.project-modal-v2__title {
  grid-area: title;
  position: relative;
  z-index: 2;
  margin: 22px 54px 0;
  font-family: "Baloo Bhaijaan 2", system-ui, sans-serif;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-modal-v2__copy {
  grid-area: copy;
  min-width: 0;
  align-self: start;
  padding-top: 6px;
}

.project-modal-v2__copy p {
  margin: 0;
  max-width: 100%;
  color: #3f3b35;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.8;
  font-weight: 500;
}

html[dir="rtl"] .project-modal-v2__copy {
  text-align: right;
}

html[dir="ltr"] .project-modal-v2__copy {
  text-align: left;
}

.project-modal-v2__media {
  grid-area: media;
  min-width: 0;
}

.project-modal-v2__viewport {
  position: relative;
  height: clamp(320px, 34vw, 430px);
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: #fff;
  box-shadow: 6px 7px 0 rgba(23, 23, 23, 0.13);
}

.project-modal-v2__viewport img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #fff;
}

.project-modal-v2__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  box-shadow: 2px 3px 0 rgba(23, 23, 23, 0.13);
}

.project-modal-v2__nav:hover {
  background: var(--project-accent);
}

.project-modal-v2__nav:disabled {
  display: none;
}

.project-modal-v2__nav--prev {
  left: 12px;
}
.project-modal-v2__nav--next {
  right: 12px;
}

.project-modal-v2__dots {
  min-height: 14px;
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.project-modal-v2__dot {
  width: 20px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.18);
  cursor: pointer;
  transition:
    width 0.2s ease,
    background 0.2s ease;
}

.project-modal-v2__dot.active {
  width: 38px;
  background: var(--project-accent);
}

body.project-modal-open {
  overflow: hidden;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1050px) {
  .project-showcase-card {
    position: relative;
    top: auto;
    width: min(760px, 92vw);
    margin-bottom: 34px;
  }

  .project-showcase-card__frame {
    height: auto;
    aspect-ratio: 16/10;
  }
}

@media (max-width: 760px) {
  .projects-section {
    padding-bottom: 90px;
  }
  .projects-stack {
    padding-top: 48px;
  }

  .project-showcase-card {
    width: 92vw;
    padding: 15px;
    border-radius: 24px;
    box-shadow: 5px 6px 0 rgba(23, 23, 23, 0.12);
    gap: 16px;
  }

  .project-showcase-card::before {
    width: 105px;
    height: 14px;
    top: 8px;
  }

  .project-showcase-card::after {
    width: 62px;
    height: 62px;
    border-width: 4px;
  }

  .project-showcase-card__title {
    padding: 18px 6px 0;
  }

  .project-showcase-card__title h3 {
    padding: 0.14em 0.03em 0.1em;
    font-size: clamp(32px, 9.7vw, 46px);
    line-height: 1.16;
    white-space: normal;
    text-wrap: balance;
    overflow: visible;
  }

  .project-showcase-card__accent {
    width: 38px;
    height: 6px;
    margin-bottom: 10px;
  }

  .project-showcase-card__frame {
    height: auto;
    aspect-ratio: 16/10;
    border-radius: 19px;
    box-shadow: 4px 5px 0 rgba(23, 23, 23, 0.12);
  }

  .project-modal-v2 {
    padding: 9px;
  }

  .project-modal-v2__panel,
  html[dir="ltr"] .project-modal-v2__panel {
    width: min(94vw, 720px);
    max-height: calc(100svh - 18px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "copy";
    gap: 16px;
    padding: 54px 16px 22px;
    border-radius: 26px;
    box-shadow: 6px 7px 0 rgba(23, 23, 23, 0.2);
  }

  .project-modal-v2__panel::before {
    width: 105px;
    height: 13px;
    top: 11px;
    inset-inline-end: 15%;
  }

  .project-modal-v2__close {
    top: 10px;
    inset-inline-start: 10px;
    width: 39px;
    height: 39px;
    font-size: 22px;
  }

  .project-modal-v2__title {
    margin: 0 34px;
    font-size: clamp(25px, 7vw, 36px);
    line-height: 1.08;
    white-space: normal;
    text-wrap: balance;
    overflow: visible;
  }

  .project-modal-v2__copy,
  html[dir="rtl"] .project-modal-v2__copy,
  html[dir="ltr"] .project-modal-v2__copy {
    padding-top: 0;
    text-align: center;
  }

  .project-modal-v2__copy p {
    margin-inline: auto;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.7;
  }

  .project-modal-v2__viewport {
    height: auto;
    aspect-ratio: 16/10;
    border-radius: 18px;
    box-shadow: 4px 5px 0 rgba(23, 23, 23, 0.12);
  }

  .project-modal-v2__nav {
    width: 37px;
    height: 37px;
    font-size: 25px;
    border-radius: 11px;
  }

  .project-modal-v2__nav--prev {
    left: 8px;
  }
  .project-modal-v2__nav--next {
    right: 8px;
  }
  .project-modal-v2__dots {
    margin-top: 11px;
  }
}

.project-showcase-card.is-motion-active {
  will-change: transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase-card__frame img {
    transition: none;
  }
  .project-showcase-card {
    will-change: auto !important;
  }
}

/* =========================================================
   V6 performance test
   Same sticky stack concept, cheaper compositing while scrolling.
   ========================================================= */
.project-showcase-card {
  /* Hard shadow only: avoids large blurred repaint regions on stacked cards. */
  box-shadow: 7px 8px 0 rgba(23, 23, 23, 0.11);
  backface-visibility: hidden;
}

.project-showcase-card.is-motion-active {
  will-change: transform;
}

.project-showcase-card:not(.is-motion-active) {
  will-change: auto;
}

.project-showcase-card__frame {
  contain: layout paint;
}

/* Hover image scaling is invisible while actively scrolling and costs paint. */
body.is-scrolling .project-showcase-card__frame img {
  transition: none !important;
  transform: none !important;
}

body.is-scrolling .project-showcase-card:hover {
  box-shadow: 7px 8px 0 rgba(23, 23, 23, 0.11);
}

@media (max-width: 1050px) {
  .project-showcase-card,
  .project-showcase-card.is-motion-active {
    will-change: auto;
    transform: none !important;
  }
}

/* =========================================================
   V7 — tighter media preview + full-screen image viewer
   ========================================================= */

/* Preview fills the frame more tightly. The full viewer still shows 100% of the original image. */
.project-modal-v2__image-trigger {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 22px;

  border: 0;

  background: var(--project-bg);

  display: grid;
  place-items: center;

  overflow: hidden;

  cursor: zoom-in;
}

.project-modal-v2__viewport .project-modal-v2__image-trigger img {
  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center;

  background: transparent;

  border-radius: 14px;
}

.project-modal-v2__image-trigger:focus-visible {
  outline: 4px solid var(--project-accent);
  outline-offset: -6px;
}

/* Arrow icons are drawn with CSS, so RTL can never mirror them. */
.project-modal-v2__nav {
  direction: ltr !important;
  unicode-bidi: isolate;
  font-size: 0 !important;
}

.project-modal-v2__nav::before {
  content: "";
  width: 10px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  display: block;
}

.project-modal-v2__nav--prev::before {
  transform: rotate(135deg);
}
.project-modal-v2__nav--next::before {
  transform: rotate(-45deg);
}

.project-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.project-image-viewer.open {
  display: grid;
}

.project-image-viewer__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}

.project-image-viewer__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.project-image-viewer__stage img {
  display: block;
  max-width: min(96vw, 1800px);
  max-height: 92svh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
}

.project-image-viewer__close {
  position: fixed;
  z-index: 4;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font:
    500 30px/1 system-ui,
    sans-serif;
  cursor: pointer;
  pointer-events: auto;
}

body.project-image-viewer-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  /* .project-modal-v2__viewport .project-modal-v2__image-trigger img{
    width:106%;
    height:106%;
  } */
  .project-image-viewer {
    padding: 10px;
  }
  .project-image-viewer__stage img {
    max-width: 96vw;
    max-height: 88svh;
    border-radius: 12px;
  }
  .project-image-viewer__close {
    width: 44px;
    height: 44px;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    font-size: 27px;
  }
}

.project-modal-v2__viewport,
.project-modal-v2__image-trigger{
  background: color-mix(
    in srgb,
    var(--project-bg) 72%,
    white 28%
  ) !important;
}

/* =========================================================
   Real project data: long titles + readable structured copy
   ========================================================= */
.project-showcase-card--long-title .project-showcase-card__title h3{
  font-size:clamp(30px,3.15vw,48px);
  white-space:normal;
  text-wrap:balance;
  max-width:1000px;
}
.project-showcase-card--very-long-title .project-showcase-card__title h3{
  font-size:clamp(26px,2.7vw,40px);
  line-height:1.1;
  letter-spacing:-.018em;
  white-space:normal;
  text-wrap:balance;
  max-width:1000px;
}

.project-modal-v2__title{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  text-wrap:balance;
  max-width:900px;
  justify-self:center;
}

.project-modal-v2__copy{
  max-height:clamp(320px,34vw,430px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding-inline-end:8px;
}
.project-modal-v2__description{
  display:grid;
  gap:14px;
  color:#3f3b35;
  font-size:clamp(15px,1.14vw,18px);
  line-height:1.78;
  font-weight:500;
}
.project-modal-v2__description p{
  margin:0;
}
.project-modal-v2__description ul{
  margin:0;
  padding-inline-start:1.25em;
  display:grid;
  gap:7px;
}
.project-modal-v2__description li::marker{
  color:var(--project-accent);
}
.project-description-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}
.project-description-link{
  color:#1559b7;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.project-description-link--button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
  text-decoration:none;
  box-shadow:2px 3px 0 rgba(23,23,23,.11);
}
.project-description-link--button:hover{
  transform:translateY(-1px);
  box-shadow:3px 4px 0 rgba(23,23,23,.13);
}

@media(max-width:760px){
  .project-showcase-card__title h3,
  .project-showcase-card--long-title .project-showcase-card__title h3,
  .project-showcase-card--very-long-title .project-showcase-card__title h3{
    white-space:normal;
    text-wrap:balance;
  }
  .project-showcase-card--very-long-title .project-showcase-card__title h3{
    font-size:clamp(25px,7.4vw,34px);
  }
  .project-showcase-card--long-title .project-showcase-card__title h3{
    font-size:clamp(28px,8vw,38px);
  }
  .project-modal-v2__copy{
    max-height:none;
    overflow:visible;
    padding-inline-end:0;
  }
  .project-modal-v2__description{
    font-size:15px;
    line-height:1.72;
  }
}


/* =========================================================
   V9 — viewport-safe cards + complete media gallery
   ========================================================= */

/* Keep the complete desktop card visible even when real project titles wrap. */
@media (min-width: 1051px){
  .project-showcase-card{
    height:min(690px, calc(100svh - var(--header) - 34px));
    min-height:520px;
    grid-template-rows:auto minmax(0,1fr);
  }
  .project-showcase-card__media,
  .project-showcase-card__frame{
    min-height:0;
    height:100%;
  }
}

/* Preview background always follows the project card instead of falling back to white. */
.project-modal-v2__viewport,
.project-modal-v2__image-trigger,
.project-modal-v2__video{
  background:color-mix(in srgb, var(--project-surface) 78%, white 22%) !important;
}

.project-modal-v2__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:22px;
  border:0;
  object-fit:contain;
  border-radius:20px;
  z-index:1;
}

.project-modal-v2__video[hidden],
.project-modal-v2__image-trigger[hidden]{
  display:none !important;
}

/* Video dot gets a small play cue without changing the normal gallery rhythm. */
.project-modal-v2__dot.is-video{
  position:relative;
  width:22px;
}
.project-modal-v2__dot.is-video::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-42%,-50%);
  width:0;
  height:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-left:5px solid rgba(23,23,23,.58);
}
.project-modal-v2__dot.is-video.active::after{
  border-left-color:#111;
}

/* Full-screen viewer navigation. Physical direction never changes with RTL. */
.project-image-viewer__nav{
  position:fixed;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:16px;
  background:rgba(255,255,255,.94);
  color:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  cursor:pointer;
  pointer-events:auto;
  direction:ltr !important;
}
.project-image-viewer__nav:disabled{display:none;}
.project-image-viewer__nav--prev{left:max(18px,env(safe-area-inset-left));}
.project-image-viewer__nav--next{right:max(18px,env(safe-area-inset-right));}
.project-image-viewer__nav::before{
  content:"";
  width:12px;
  height:12px;
  border:solid currentColor;
  border-width:0 3px 3px 0;
  display:block;
}
.project-image-viewer__nav--prev::before{transform:rotate(135deg);}
.project-image-viewer__nav--next::before{transform:rotate(-45deg);}
.project-image-viewer__nav:hover{background:var(--project-accent,#ffd65c);}

.project-image-viewer__count{
  position:fixed;
  z-index:5;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  min-width:66px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#111;
  text-align:center;
  font:700 13px/1 "Baloo Bhaijaan 2",system-ui,sans-serif;
  pointer-events:none;
}

.project-image-viewer__stage img{
  max-width:min(calc(100vw - 180px),1800px);
  max-height:90svh;
}

@media(max-width:760px){
  .project-modal-v2__video{padding:12px;border-radius:16px;}
  .project-image-viewer__stage img{
    max-width:calc(100vw - 24px);
    max-height:84svh;
  }
  .project-image-viewer__nav{
    width:44px;
    height:44px;
    border-radius:13px;
    background:rgba(255,255,255,.9);
  }
  .project-image-viewer__nav--prev{left:max(8px,env(safe-area-inset-left));}
  .project-image-viewer__nav--next{right:max(8px,env(safe-area-inset-right));}
  .project-image-viewer__nav::before{width:10px;height:10px;border-width:0 3px 3px 0;}
  .project-image-viewer__count{bottom:max(10px,env(safe-area-inset-bottom));}
}

.project-modal-v2__nav{z-index:4;}
\n\n/* =========================================================\n   V9.1 — final project-title wrapping / Arabic glyph safety\n   ========================================================= */\n.project-showcase-card__title{\n  padding-top:20px;\n  padding-bottom:6px;\n  overflow:visible;\n}\n.project-showcase-card__title h3{\n  line-height:1.22;\n  padding-top:.26em;\n  padding-bottom:.16em;\n}\n.project-showcase-card--long-title .project-showcase-card__title h3{\n  max-width:960px;\n  white-space:normal;\n  text-wrap:balance;\n  font-size:clamp(30px,3.2vw,48px);\n  line-height:1.2;\n}\n.project-showcase-card--very-long-title .project-showcase-card__title h3{\n  max-width:1000px;\n  white-space:normal;\n  text-wrap:balance;\n  font-size:clamp(25px,2.55vw,38px);\n  line-height:1.2;\n}\n@media(max-width:760px){\n  .project-showcase-card__title{\n    padding-top:16px;\n    padding-bottom:4px;\n  }\n  .project-showcase-card__title h3,\n  .project-showcase-card--long-title .project-showcase-card__title h3,\n  .project-showcase-card--very-long-title .project-showcase-card__title h3{\n    line-height:1.22;\n    padding-top:.28em;\n    padding-bottom:.18em;\n  }\n}\n