.hybrid-lesson-visual {
  margin: 0;
}

.hybrid-lesson-visual__description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hybrid-lesson-visual__canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--hybrid-desktop-ratio);
  border: 1px solid var(--w-rule, #e6d2b8);
  border-radius: 14px;
  background: var(--w-bg, #f9efe1);
}

.hybrid-lesson-visual__base,
.hybrid-lesson-visual__overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hybrid-lesson-visual__base {
  object-fit: fill;
}

.hybrid-lesson-visual__overlay {
  pointer-events: none;
}

.hybrid-lesson-visual__caption {
  margin: 14px 4px 0;
  color: var(--w-ink, #2d3142);
  font-weight: 650;
  line-height: 1.5;
}

.hybrid-lesson-visual__action {
  margin: 8px 4px 0;
  color: var(--w-ink-soft, #556);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .hybrid-lesson-visual__canvas {
    aspect-ratio: var(--hybrid-mobile-ratio);
  }

  .hybrid-lesson-visual__caption,
  .hybrid-lesson-visual__action {
    font-size: 0.92rem;
  }
}

@media print {
  .hybrid-lesson-visual__canvas {
    break-inside: avoid;
    border-color: #777;
    background: #fff;
    print-color-adjust: exact;
  }
}