@use '../../_styles/mixin.scss' as *;

.o-figure {
  @include respond('laptop') {
    --figure-play-icon-size: 56px;
  }

  @include respond('pad') {
    --figure-play-icon-size: 48px;
  }

  @include respond('phone') {
    --figure-play-icon-size: 40px;
  }
}

.o-figure-title {
  @include respond('pad') {
    font-size: var(--o-font_size-text1);
    line-height: var(--o-line_height-text1);
  }
  @include respond('phone') {
    font-size: var(--o-font_size-tip1);
    line-height: var(--o-line_height-tip1);
  }
}
.o-figure-content {
  @include respond('pad') {
    padding: 12px 16px;
  }
  @include respond('phone') {
    padding: 4px 8px;
  }
}
.o-figure-preview-img {
  img {
    @include respond('<=pad') {
      max-width: 100vw;
    }
  }
}

.o-figure-preview-close {
  @include respond('<=pad') {
    left: 16px;
    right: auto;
  }
}

.o-figure-preview-layer {
  @include respond('<=pad') {
    --layer-mask: var(--o-color-black);
  }
}