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

.small-banner {
  text-decoration: none;
  display: flex;
  flex-direction: column;

  .image {
    width: 100%;
    height: auto;
  }

  .widget {
    flex: 1 0 0;
    position: relative;
    border-bottom: 6px solid #373737;
    @include text-widget(
      $background-color: #eeecec,
      $padding: 25px 25px 0 25px,
    );
    &::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;
  }
}