.media-banner {
  color: var(--color-foreground);
  background-color: transparent;
  background: none;
  background-attachment: unset;
  padding: 0;
  margin: 0;

  .media-banner__wrapper {
    position: relative;
    display: flex;
    margin: 0;

    .media-banner__buttons {
      
      @media only screen and (max-width: 767px) {
        &.button-layout-mobile__stacked {
          flex-direction: column !important;
          align-items: flex-start !important;
        }
      }
    }

    /* @media only screen and (min-width: 990px) { */
      &.content-align__horizontal--left {
        justify-content: flex-start;

        .media-banner__content-wrapper {
          justify-content: flex-start;
        }
        
        .media-banner__content {
          text-align: left;
          margin-right: auto;
        }
  
        .media-banner__description {
          margin-right: auto;
        }
  
        .media-banner__buttons {
  
          &.button-layout__inline {
            justify-content: flex-start;
          }
  
          &.button-layout__stacked {
            align-items: flex-start;
          }
        }
      }
  
      &.content-align__horizontal--center {
        justify-content: center;

        .media-banner__content-wrapper {
          justify-content: center;
        }
        
        .media-banner__content {
          text-align: center;
          margin-left: auto;
          margin-right: auto;
        }
  
        .media-banner__description {
          margin-left: auto;
          margin-right: auto;
        }
  
        .media-banner__buttons {
  
          &.button-layout__inline {
            justify-content: center;
          }
  
          &.button-layout__stacked {
            align-items: center;
          }
        }
      }
  
      &.content-align__horizontal--right {
        justify-content: flex-end;

        .media-banner__content-wrapper {
          justify-content: flex-end;
        }
        
        .media-banner__content {
          text-align: right;
          margin-left: auto;
        }
  
        .media-banner__description {
          margin-left: auto;
        }
  
        .media-banner__buttons {
  
          &.button-layout__inline {
            justify-content: flex-end;
          }
  
          &.button-layout__stacked {
            align-items: flex-end;
          }
        }
      }
  
      &.content-align__vertical--top {
        
        .media-banner__content-wrapper {
          align-items: flex-start;
        }
      }
  
      &.content-align__vertical--center {
        .media-banner__content-wrapper {
          align-items: center;
        }
      }
  
      &.content-align__vertical--bottom {
        .media-banner__content-wrapper {
          align-items: flex-end;
        }
      }
    /* } */
  }

  .media-banner__inner {
    padding-top: 12rem;
    padding-bottom: 6.4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    
    @media only screen and (min-width: 990px) {
      padding-top: 6rem;
      padding-bottom: 6rem;
      padding-left: 6rem;
      padding-right: 6rem;
    }
  }

  .media-banner__media {
    position: absolute;
    padding: 0;
    margin: 0;
    overflow: hidden;

    img,
    video {
      display: block;
      position: static;
      width: 100%;
      max-width: 100%;
      height: 100%;
      object-position: center;
    }
  }

  .media-banner__media::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  .media-banner__content {

    .media-banner__heading,
    .media-banner__description,
    p {
      padding: 0;
      margin: 0;
    }

    .media-banner__heading {
      line-height: 1.1;

      + * {
        margin-top: 2rem;
      }
    }

    .media-banner__description {

      * + * {
        margin-top: 2rem;
      }

      + * {
        margin-top: 4rem;
      }
    }

    .media-banner__buttons {
      display: flex;
      gap: 1.6rem;
      margin-top: 4rem;

      &.button-layout__inline {
        flex-direction: row;
      }

      &.button-layout__stacked {
        flex-direction: column;
      }
    }
  }

  .media-banner__content-wrapper {
    position: relative;
    display: flex;
    overflow: hidden;
    isolation: isolate;

    .media-banner__media {
      height: 100%;
      width: 100%;
      z-index: -1;
    }

    .media-banner__inner {
      position: relative;
      z-index: 1;
    }
  }
}