banner-kross

.banner-kross {
  position: relative;
  overflow: hidden;
}

.banner-kross__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.banner-kross__image {
  display: block;
  width: 100%;
}

.banner-kross__inner {
  @media (min-width: 750px) and (hover:hover) {
    transition: transform 250ms;
    transform: translateX(100%);
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    max-width: 40%;
    height: 100%;
    color: var(--color--neutrals-0);
    background-color: transparent;
  }

  .banner-kross:hover & {
    @media (min-width: 750px) and (hover:hover) {
      transform: translateX(0);
    }
  }
}

.banner-kross__inner:before {
  @media (min-width: 750px) and (hover:hover) {
    transition: transform 150ms;
    transform-origin: 0 0;
    transform: skew(0deg);
    position: absolute;
    top: 0;
    left: 0;
    right: -200%;
    display: block;
    height: 100%;
    content: '';
    background-color: var(--color--neutrals-8);
    opacity: 0.7;
  }

  .banner-kross:hover & {
    @media (min-width: 750px) and (hover:hover) {
      transform: skew(-45deg);
    }
  }
}

.banner-kross__content {
  padding: calc(var(--gap) * 3) var(--gutter--bucket) 0;
  font-size: var(--caption);
  line-height: 1.3;
  text-align: center;

  @media (min-width: 750px) and (hover:hover) {
    transition: transform 250ms, opacity 250ms;
    transform: translate(100%);
    position: relative;
    padding: calc(var(--gap) * 10);
    font-size: var(--p--2);
    text-align: left;
    opacity: 0;
  }

  .banner-kross:hover & {
    @media (min-width: 750px) and (hover:hover) {
      transition: transform 250ms 100ms, opacity 250ms 100ms;
      transform: translate(0);
      opacity: 1;
    }
  }
}