.product-banner {
   display: flex;
   margin-bottom: 20px;
   min-height: 70px;
   position: relative;
   padding: 10px;

   .img {
      position: absolute;
      display: flex;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: $border-radius-base;
      overflow: hidden;

      picture {
         display: flex;
         width: 100%;
      }

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

   .content {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-left: auto;
      padding: 0 30px;

      .title {
         font-size: $font-size-larger;
         font-weight: $font-weight-bold;
         line-height: $line-height-md;
         padding-right: 10px;
         margin-bottom: 5px;
      }

      a {
         white-space: nowrap;
      }

      p {
         margin-bottom: 0;
         font-size: 12px;
         font-weight: lighter;
         line-height: $line-height-sm;
         padding-right: 10px;
      }
   }

   .content-white {
      .title,
      p,
      a {
         color: $white;
      }
   }

   @media screen and (min-width: $lg) and (max-width: $xxl - 1),
   screen and (max-width: $sm - 1) {
      min-height: 85px;

      .content {
         flex-direction: row;
         align-items: center;
      }
   }

   @media screen and (max-width: $xs - 1) {
      .content {
         padding: 0px 15px;

         .content-info {
            width: 70%;
         }
      }
   }
}
