.tech-inner {
  row-gap: 3.2rem;
}
.tech-heading {
  grid-column: 1 / 8;
}
.tech-heading h2 {
  max-width: 15ch;
}
.tech-grid {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(180px, auto));
  gap: var(--gutter);
}
.tech-media {
  grid-row: 1 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tech-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tech-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-bg-alt);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.tech-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.tech-card::before {
  content: attr(data-index);
  position: absolute;
  top: 1.6rem;
  right: 1.8rem;
  font: 500 0.72rem/1 var(--font-mono);
  color: var(--color-accent-strong);
}
.tech-card--dark {
  background: var(--color-bg-dark-deep);
  color: var(--color-text-on-dark);
}
.tech-card--dark::before {
  color: var(--c-olive-100);
}
.tech-card--dark p {
  color: var(--color-text-muted-on-dark);
}
.tech-card h3 {
  margin-bottom: 0.6rem;
}
.tech-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.tech-close {
  grid-column: 1 / 8;
}
.tech-line {
  max-width: 24ch;
}
.tech-close > .link-quiet {
  margin-top: 1.6rem;
  color: var(--color-heading);
}

@media (max-width: 1080px) {
  .tech-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tech-media {
    grid-column: 1 / 3;
    grid-row: 1;
    aspect-ratio: 16 / 9;
  }
}