@import "tailwindcss/theme";
@import "../variables/theme.css";

.keyvisual {
  padding-bottom: var(--spacing-sm-md);

  @variant md {
    padding-bottom: var(--spacing-md-md);
  }

  @variant lg {
    padding-bottom: var(--spacing-lg-md);
  }
}

.keyvisual-source {
  @apply aspect-video object-cover object-top;

  @variant lg {
    @apply aspect-auto w-full;

    padding-right: calc(8.5% - 40px);
    transform: translateX(calc(var(--spacing-40) * -1));
  }
}

.keyvisual-source--right {
  @variant lg {
    @apply pr-0;

    padding-left: calc(8.5% - 43px);
    transform: translateX(var(--spacing-40));
  }
}