@use "./shared.scss" as *;

.ingredient-banner {
  text-decoration: none;
  width: 100%;
  max-width: $content-max-width;
  height: 450px;
  position: relative;
  display: flex;
  justify-content: end;
  @include point-tablet {
    flex-direction: column;
    height: auto;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    z-index: -1;
    @include point-tablet {
      height: auto;
      width: 100%;
      position: static;
    }
  }

  .widget {
    height: 100%;
    width: 400px;
    z-index: 1;
    position: relative;
    border-bottom: 6px solid #373737;
    @include point-tablet {
      width: 100%;
      height: auto;
    }
    @include text-widget(
      $title-color: #373737,
      $content-color: #333,
      $background-color: #eeecec,
      $padding: 43px 22px 0 26px,
    );
    &::after {
      top: 100%;
      visibility: hidden;
      @include line-animation;
    }
    .link {
      margin-bottom: 22px;
      @include link-icon;
    }
  }
  
  &:hover .widget .link {
    @include link-icon-hover;
  }
  &:hover .widget::after {
    width: 100%;
    visibility: visible;
  }
}