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

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

.ect-video {
  overflow: hidden;
  margin: 24px 0 0;
  border: 1px solid #343434;
  border-radius: 12px;
  background: #111;
}

.ect-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 817 / 360;
  object-fit: contain;
  background: #000;
}

.ect-video__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid #343434;
}

.ect-video [hidden] {
  display: none !important;
}

.ect-video__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: 500 13px/1.2 Inter, Arial, sans-serif;
  cursor: pointer;
}

.ect-video__button:hover {
  background: #292929;
}

.ect-video__button:focus-visible,
.ect-video__seek:focus-visible {
  outline: 2px solid #ffd21a;
  outline-offset: 4px;
}

.ect-video__play {
  min-width: 134px;
}

.ect-video__seek {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  accent-color: #ffd21a;
  cursor: pointer;
}

.ect-video__time {
  flex-shrink: 0;
  color: #c9c9c9;
  font: 12px/1.3 Inter, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ect-video__fullscreen svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ect-video figcaption {
  padding: 14px 16px;
  border-top: 1px solid #343434;
  color: #a8a8a8;
  font: 13px/1.5 Inter, Arial, sans-serif;
}

.portfolio-project__content .ect-video__error {
  margin: 0;
  padding: 0 16px 16px;
  color: #fff;
}

.ect-video:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #000;
}

.ect-video:fullscreen video {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

@media (max-width: 560px) {
  .portfolio-project__content .ect-case h2 {
    font-size: var(--font-size-title);
  }

  .ect-video__controls {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
  }

  .ect-video__seek {
    order: 1;
    flex-basis: 100%;
    width: 100%;
  }

  .ect-video__time {
    margin-left: auto;
  }
}