.drawer-banner {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  gap: var(--gap-lg);
  padding: var(--padding-lg);

  @media screen and (width < 749px) {
    height: auto;
    margin-block-start: var(--margin-xl);
    padding: var(--page-margin) var(--page-margin) calc(2.5 * var(--page-margin));
  }
}

.drawer-banner__content {
  display: flex;
  gap: var(--gap-xs);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  white-space: normal;

  .text-link {
    flex-shrink: 0;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    @media screen and (width > 750px) {
      font-size: var(--font-size--sm);

      .text-link__icon {
        width: var(--icon-size-xs);
        height: var(--icon-size-xs);
      }
    }
  }
}

.drawer-banner__title {
  margin-block: 0;
  font-size: var(--font-size--xl);
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color, var(--font-h2-color));

  @media screen and (width > 750px) {
    font-size: var(--font-size--md);
  }
}

.drawer-banner__image {
  img {
    transition: scale var(--animation-speed-slow) ease-in-out;

    .drawer-banner:hover &,
    .drawer-banner:focus-visible & {
      scale: 1.025;
    }
  }

  @media screen and (width > 750px) {
    flex-grow: 1;
    overflow: hidden;

    img {
      object-fit: cover;
      height: 100%;
    }
  }
}

.drawer-banner__image--desktop {
  aspect-ratio: 30/36;
}