@use "system/typography";
@use "system/spacing";
@use "system/breakpoints";

.ods-video {
  &--16x9 {
    padding-top: calc(100% / 16 * 9);
    position: relative;
    background-color: black;
  }

  &__heading {
    @extend %ods-margin-bottom-4;
    @extend %ods-text--size-hotel, %ods-text--size-foxtrot-breakpoint-medium, %ods-text--size-delta-breakpoint-large;
    @extend %ods-text--weight-regular;
  }

  &__video {
    width: 100%;

    &--16x9 {
      position: absolute;
      inset: 0;
      height: 100%;
    }
  }

  &__transcription-heading {
    @extend %ods-margin-vertical-3;
    @extend %ods-text--size-juliett, %ods-text--size-india-breakpoint-medium, %ods-text--size-hotel-breakpoint-large;
    @extend %ods-text--weight-medium;
  }
}