.case-card {
  --selection-inset-x: 1px;
  --selection-inset-y: 1px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.case-card__media {
  height: var(--size-card-media);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
}

@media (width >= 768px) {
  .case-card--featured {
    grid-column: 1 / -1;
  }

  .case-card__media {
    height: auto;
    aspect-ratio: 586 / 330;
  }

  .case-card__media.media--centology-app {
    aspect-ratio: 1198 / 440;
  }
}

@media (width >= 1024px) {
  .case-card--horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .case-card--horizontal .case-card__media,
  .case-card--horizontal .case-card__media.media--centology-app {
    aspect-ratio: auto;
    min-height: var(--size-card-media);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
}

.case-card:has(> .selection),
.case-card:has(> .selection) .case-card__media {
  transition: border-radius var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .case-card:has(> .selection):hover,
  .case-card:has(> .selection):hover .case-card__media {
    border-radius: 0;
  }
}

.case-card:has(> .selection):has(:focus-visible),
.case-card:has(> .selection):has(:focus-visible) .case-card__media {
  border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
  .case-card:has(> .selection):active,
  .case-card:has(> .selection):active .case-card__media {
    border-radius: 0;
  }
}

.case-card__media .media__composition,
.case-card__media .media-nda__skeleton {
  transition: scale var(--duration-slow) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .case-card:has(> .selection):hover .media__composition,
    .case-card:has(> .selection):hover .media-nda__skeleton {
      scale: 1.04;
    }
  }

  .case-card:has(> .selection):has(:focus-visible) .media__composition,
  .case-card:has(> .selection):has(:focus-visible) .media-nda__skeleton {
    scale: 1.04;
  }
}


.case-card:has(> .selection) .case-card__link:focus-visible {
  outline-color: transparent;
}

.case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
}

.case-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.case-card__title {
  text-wrap: pretty;
}

.case-card__desc {
  color: var(--color-text-secondary);
}

.case-card__contribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case-card__label {
  color: var(--color-accent);
  font-weight: 500;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
}

.case-card__link {
  align-self: flex-start;
  margin-top: auto;
}

.case-card .case-card__link {
  position: static;
}

.case-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (width < 768px) {
  .case-card__desc {
    display: none;
  }
}