.portfolio-project__content .dotkot-case h2 {
  font-size: var(--font-size-title);
}

.portfolio-project__content .dotkot-case h3 {
  font-size: var(--font-size-subheading);
}

.portfolio-project-page:has(.dotkot-case) .portfolio-project__media img {
  max-height: none;
  object-fit: contain;
}

.dotkot-case__product {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: #191a18;
}

.dotkot-case__product img {
  width: 100%;
  height: auto;
}

.dotkot-case__product figcaption {
  padding: 16px 20px;
  color: #b7b8b4;
  font: 400 14px/1.5 Inter, Arial, sans-serif;
}

.portfolio-project__content .dotkot-case__caption {
  max-width: none;
  margin-top: 24px;
  color: #a7a8a4;
  font-size: 14px;
}

.dotkot-case__sources a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dotkot-case__sources a:hover,
.dotkot-case__sources a:focus-visible {
  color: #fff;
}

.dotkot-case .portfolio-site-shot__viewport:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

@media (max-width: 600px) {
  .portfolio-project-page:has(.dotkot-case) .portfolio-project__header h1 {
    overflow-wrap: anywhere;
  }

  .portfolio-project__content .dotkot-case h2 {
    font-size: var(--font-size-title);
  }

  .portfolio-project__content .dotkot-case h3 {
    font-size: var(--font-size-subheading);
  }
}