@import '../helpers/helpers';

.card-product-banner {
  @include make-col(4);
  margin-bottom: 30px;

  @include media-breakpoint-down(md) { 
    @include make-col(6);
  }

  @include media-breakpoint-down(sm) {
    position: relative;
    padding: 0 5px;
    margin-bottom: 20px;

    &::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 5px;
      width: calc(100% - 10px);
      border-bottom: 1px solid #ccc;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5px;
      width: calc(100% - 10px);
      border-bottom: 1px solid #ccc;
    }
  }

  &__link {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0 15px;

    @include media-breakpoint-down(sm) {
      display: inline-block; 
      padding: 0;
      width: 100%;
    }
  }

  &__image {
    display: inline-block;
    width: 100%;
  }
} 
