/* ==========================================================================
   Home banner.
   ========================================================================== */
.l-banner {
  .main-content {
    position: relative;
  }
  .is-front & {
    .content-sidebar {
      position: absolute;
    }
    /* Responsive.
       ========================================================================== */
    @media screen and (max-width: 48em) {
      .main-header {
        background-color: color-mix(in oklab, var(--color-fg-primary) 70%, white);
      }
    }
    @media screen and (min-width: 48em) {
      .main {
        padding-top: 0;
      }
    }
  }
}
.main-banner {
  position: relative;

  .row {
    padding: 0;
  }
  .banner-content {
    position: absolute;
    bottom: 0;
    display: block;
    padding: var(--space-xs) var(--space-l);
    transition: .4s;

    h1,
    h2 {
      color: inherit;
    }

    /* Responsive.
       ========================================================================== */
    @media screen and (min-width: 48em) {
      padding: 72px calc(var(--sidebar-width) + var(--gutter-m));

      &.is-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
      }
    }
  }
  .banner-image {
    /* Responsive.
       ========================================================================== */
    @media screen and (min-width: 48em) {
      min-height: 300px;
    }

    picture,
    img {
      display: block;
    }
  }
  .mouse-scroll {
    display: none;

    /* Responsive.
       ========================================================================== */
    @media screen and (min-width: 48em) {
      position: absolute;
      bottom: var(--space-xl);
      left: 50%;
      transform: translateX(-50%);
      display: block;

      .item-mouse {
        position: relative;
        width: 24px;
        height: 42px;
        border: 2px solid white;
        border-radius: 14px;
      }
      .item-wheel {
        position: relative;
        display: block;
        margin: 5px auto;
        width: 4px;
        height: 4px;
        background: #fff;
        border: 2px solid #fff;
        border-radius: 8px;
        animation: mouse-wheel 1.4s linear infinite;
      }
      .item-arrow {
        display: block;
        margin: 1px 0 3px -1px;
        width: 16px;
        height: 16px;
        transform: rotate(45deg);
        transform-origin: bottom;
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
        animation: mouse-scroll 1.4s infinite;
        animation-direction: alternate;
        animation-delay: alternate;
      }
    }
  }
}

/* Content banner.
   ========================================================================== */
.content-banner {
  position: relative;
  margin-bottom: var(--space-xl);
  border-radius: 4px;
  overflow: hidden;

  img,
  picture {
    display: block;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .2);
  }
}
.content-banner--body {
  position: absolute;
  z-index: 10;
  padding: var(--space-xs) var(--space-l);
  bottom: 0;

  .content-title {
    color: #fff;
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}