.simple-background-host, .simple-background {
  display: block;
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .background.css {
    width: 100%;
    height: 100%;
    max-width: 2600px;
    margin: 0 auto;
    background-image: var(--background-image-min);
    background-position: var(--background-position-min);
    background-size: var(--background-size-min);
    background-repeat: var(--background-repeat-min);
    background-attachment: var(--background-attachment-min);

    &.xs {
      @media (min-width: 480px) {
        background-image: var(--background-image-xs);
        background-position: var(--background-position-xs);
        background-size: var(--background-size-xs);
        background-repeat: var(--background-repeat-xs);
        background-attachment: var(--background-attachment-xs);
      }
    }

    &.sm {
      @media (min-width: 720px) {
        display: var(--background-display-sm);
        background-image: var(--background-image-sm);
        background-position: var(--background-position-sm);
        background-size: var(--background-size-sm);
        background-repeat: var(--background-repeat-sm);
      }
    }

    &.md {
      @media (min-width: 960px) {
        background-image: var(--background-image-md);
        background-position: var(--background-position-md);
        background-size: var(--background-size-md);
        background-repeat: var(--background-repeat-md);
      }
    }

    &.lg {
      @media (min-width: 1200px) {
        display: var(--background-display-lg);
        background-image: var(--background-image-lg);
        background-position: var(--background-position-lg);
        background-size: var(--background-size-lg);
        background-repeat: var(--background-repeat-lg);
      }
    }

    &.xl {
      @media (min-width: 1400px) {
        background-image: var(--background-image-xl);
        background-position: var(--background-position-xl);
        background-size: var(--background-size-xl);
        background-repeat: var(--background-repeat-xl);
      }
    }

    &.xxl {
      @media (min-width: 1600px) {
        display: var(--background-display-xxl);
        background-image: var(--background-image-xxl);
        background-position: var(--background-position-xxl);
        background-size: var(--background-size-xxl);
        background-repeat: var(--background-repeat-xxl);
      }
    }

    &.max {
      @media (min-width: 2600px) {
        background-image: var(--background-image-max);
        background-position: var(--background-position-max);
        background-size: var(--background-size-max);
        background-repeat: var(--background-repeat-max);
      }
    }
  }

  .background.image {
    max-width: 2600px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }

  .background.video {
    object-fit: var(--object-fit-min);
    object-position: var(--object-position-min);
    width: 100%;
    height: 100%;

    blz-play-button {
      z-index: 2;
    }

    &.xs {
      @media (min-width: 480px) {
        object-fit: var(--object-fit-xs);
        object-position: var(--object-position-xs);
      }
    }

    &.sm {
      @media (min-width: 720px) {
        object-fit: var(--object-fit-sm);
        object-position: var(--object-position-sm);
      }
    }

    &.md {
      @media (min-width: 960px) {
        object-fit: var(--object-fit-md);
        object-position: var(--object-position-md);
      }
    }

    &.lg {
      @media (min-width: 1200px) {
        object-fit: var(--object-fit-lg);
        object-position: var(--object-position-lg);
      }
    }

    &.xl {
      @media (min-width: 1400px) {
        object-fit: var(--object-fit-xl);
        object-position: var(--object-position-xl);
      }
    }

    &.xxl {
      @media (min-width: 1600px) {
        object-fit: var(--object-fit-xxl);
        object-position: var(--object-position-xxl);
      }
    }

    &.max {
      @media (min-width: 2600px) {
        object-fit: var(--object-fit-max);
        object-position: var(--object-position-max);
      }
    }
  }

  .background.after {
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
      background: var(--background-after-min);
    }

    &.xs:after {
      @media (min-width: 480px) {
        background: var(--background-after-xs);
      }
    }

    &.sm:after {
      @media (min-width: 720px) {
        background: var(--background-after-sm);
      }
    }

    &.md:after {
      @media (min-width: 960px) {
        background: var(--background-after-md);
      }
    }

    &.lg:after {
      @media (min-width: 1200px) {
        background: var(--background-after-lg);
      }
    }

    &.xl:after {
      @media (min-width: 1400px) {
        background: var(--background-after-xl);
      }
    }

    &.xxl:after {
      @media (min-width: 1600px) {
        background: var(--background-after-xxl);
      }
    }

    &.max:after {
      @media (min-width: 2600px) {
        background: var(--background-after-max);
      }
    }
  }

  .background.filter {
    filter: var(--background-filter-min);

    &.xs {
      @media (min-width: 480px) {
         filter: var(--background-filter-xs);
      }
    }

    &.sm {
      @media (min-width: 720px) {
         filter: var(--background-filter-sm);
      }
    }

    &.md {
      @media (min-width: 960px) {
        filter: var(--background-filter-md);
      }
    }

    &.lg {
      @media (min-width: 1200px) {
        filter: var(--background-filter-lg);
      }
    }

    &.xl {
      @media (min-width: 1400px) {
        filter: var(--background-filter-xl);
      }
    }

    &.xxl {
      @media (min-width: 1600px) {
        filter: var(--background-filter-xxl);
      }
    }

    &.max {
      @media (min-width: 2600px) {
        filter: var(--background-filter-max);
      }
    }
  }

  .background.hidden {
    display: var(--background-display-min);

    &.xs {
      @media (min-width: 480px) {
        display: var(--background-display-xs);
      }
    }

    &.sm {
      @media (min-width: 720px) {
        display: var(--background-display-sm);
      }
    }

    &.md {
      @media (min-width: 960px) {
        display: var(--background-display-md);
      }
    }

    &.lg {
      @media (min-width: 1200px) {
        display: var(--background-display-lg);
      }
    }

    &.xl {
      @media (min-width: 1400px) {
        display: var(--background-display-xl);
      }
    }

    &.xxl {
      @media (min-width: 1600px) {
        display: var(--background-display-xxl);
      }
    }

    &.max {
      @media (min-width: 2600px) {
        display: var(--background-display-max);
      }
    }
  }
}