.sales-banner {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  
  padding: var(--spacing-md);
  border-radius: 0.8rem;
  overflow: hidden;

  @media (max-width: 767px) {
    height: 50.2rem;
  }
  
  > :not(.sales-banner__background-wrapper) {
    position: relative; 
    z-index: 1;
  }

  &.sales-banner--bottom-left, &.sales-banner--bottom-right, &.sales-banner--top-left, &.sales-banner--top-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  &.sales-banner--bottom-left, &.sales-banner--bottom-right {
    justify-content: flex-end;
  }

  &.sales-banner--top-left, &.sales-banner--top-right {
    justify-content: flex-start;
  }

  .sales-banner__background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;

    * {
      height: 100%;
      width: 100%;
    }

    .sales-banner__image-wrapper.loaded {
      position: relative;
    }
  }

  :not(.sales-banner--banner-only)& :is(.sales-banner__background-wrapper.no-image, .sales-banner__background-wrapper:not(:has(img.loaded))) {
    background: rgb(34, 34, 34);
    display: block;
  }

  :not(.sales-banner--banner-only)& .sales-banner__image-wrapper.loaded::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    top: 0;
    left: 0;
  }

  .sales-banner__top-section {
    grid-row: 1 / 2;
    align-self: start;
    justify-self: center;

    /*h6*/
    font-family: var(--font-heading-family);
    font-size: 16px;
    line-height: 1.2;
  }

  .sales-banner__central-section {
    grid-row: 2 / 3;
    align-self: center;
    justify-self: center;

    /*h1*/
    font-family: var(--font-heading-family);
    font-size: 35px;
    line-height: 1.4;
  }

  .sales-banner__bottom-section {
    grid-row: 3 / 4;
    align-self: end;
    justify-self: center;
  }

  :is(&.sales-banner--bottom-left, &.sales-banner--top-left) :is(.sales-banner__top-section, .sales-banner__central-section, .sales-banner__bottom-section) {
    align-self: flex-start;
    text-align: left;
  }

  :is(&.sales-banner--bottom-right, &.sales-banner--top-right) :is(.sales-banner__top-section, .sales-banner__central-section, .sales-banner__bottom-section) {
    align-self: flex-end;
    text-align: right;
  }

  .btn--primary {
    background: var(--functional-blue);
    border-color: var(--functional-blue);
  }

  .sales-banner__top-section, .sales-banner__central-section {
    color: #fff;
    text-align: center;

    a {
      text-decoration: underline;
    }

    p, h1, h2, h3, h4, h5, h6 {
      color: inherit;
      margin: 0;
    }

    ul, ol {
      list-style: revert;
      text-align: left; 
    }
  }
}

.sales-banner__wrapper {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}