@charset "UTF-8";
section.fs-media {
    --fs-media-surface: var(--okd-block-theme-bg-neutral-110);
    --fs-media-placeholder-color: var(--okd--preset--color--neutral-40)
}

section.fs-media.-theme-neutral-110 {
    --block-background-color: var(--okd-block-theme-bg-neutral-110);
    --fs-media-surface: var(--okd-block-theme-bg-neutral-110)
}

section.fs-media.-theme-neutral-100 {
    --block-background-color: var(--okd-block-theme-bg-neutral-100);
    --fs-media-surface: var(--okd-block-theme-bg-neutral-100)
}

section.fs-media.-theme-neutral-10 {
    --block-background-color: var(--okd-block-theme-bg-neutral-10);
    --fs-media-surface: var(--okd-block-theme-bg-neutral-10);
    --fs-media-placeholder-color: var(--okd--preset--color--neutral-60)
}

section.fs-media .okd-block-container {
    padding-inline: var(--okd-line-gutter)
}

section.fs-media .fs-media__media {
    aspect-ratio: 16/9;
    background-color: var(--fs-media-surface);
    overflow: hidden;
    position: relative;
    width: 100%
}

section.fs-media .fs-media__label.u-asset-tag {
    --tag-background-color: rgba(0, 0, 0, 0.5);
    --tag-border-color: var(--okd--preset--color--neutral-50);
    --tag-text-color: rgba(255, 255, 255, 0.5);
    left: calc(var(--okd-block-padding-inline) / 2);
    position: absolute;
    top: calc(var(--okd-block-padding-inline) / 2);
    z-index: 2
}

section.fs-media .okd-c-media,
section.fs-media .fs-media__el,
section.fs-media .fs-media__placeholder,
section.fs-media picture {
    display: block;
    height: 100%;
    width: 100%
}

section.fs-media .fs-media__placeholder {
    color: var(--fs-media-placeholder-color)
}

@media (min-width:769px) {
    section.fs-media .fs-media__label.u-asset-tag {
        top: 35px
    }
}