.media-overlay {
  & &__overlay {
    padding: var(--wds-space-300, 12px);
    border-radius: inherit;
  }

  & &__overlay--skin-dark {
    /* stylelint-disable-next-line plugin/use-baseline */
    background:
      linear-gradient(rgba(0, 4, 18, 0.5), rgba(0, 4, 18, 0.5)),
      color-mix(in srgb, var(--wds-color-blue-500, #eaefff) 20%, transparent);
  }

  & &__overlay--layer-hover#{&}__overlay--skin-dark {
    /* stylelint-disable-next-line plugin/use-baseline */
    background:
      linear-gradient(rgba(0, 11, 49, 0.4), rgba(0, 11, 49, 0.4)),
      color-mix(in srgb, var(--wds-color-blue-500, #eaefff) 20%, transparent);
    /* stylelint-disable-next-line plugin/use-baseline */
    backdrop-filter: blur(var(--wds-background-blur-175, 14px));
  }

  & &__overlay--skin-gradient {
    background: linear-gradient(
      to bottom,
      var(--wds-color-black-100-transparent-0, rgba(19, 23, 32, 0)) 0%,
      var(--wds-color-black-100-transparent-5, rgba(19, 23, 32, 0.05)) 20%,
      var(--wds-color-black-100-transparent-10, rgba(19, 23, 32, 0.1)) 46.635%,
      var(--wds-color-black-100-transparent-30, rgba(19, 23, 32, 0.3)) 64.904%,
      var(--wds-color-black-200, #383838) 100%
    );
  }
}