.ef_components-pub_row_with_image {
  margin-left: -15px;
  margin-right: -15px;
}

.ef_components-pub_row_with_image > div {
  margin-left: 15px;
  margin-right: 15px;
}

.ef_components-pub_row_with_image > .__image {
  width: 160px;
  flex: 0 0 auto;
  margin-bottom: 25px;
}

.ef_components-pub_row_with_image > .__content {
  width: auto;
  /* EFD-518: Support nested flex in IE11. */
  flex: 1 1;
}

/*
 * @todo The block image with border should perhaps be its own component.
 *
 * The name of this component "Pub row with image" already advertises that the
 * region on the left is meant for an image. So perhaps it is ok to have this
 * CSS here. Still up for discussion.
 */

/* A link placed as direct child in .__image should act as image container. */
.ef_components-pub_row_with_image > div.__image > a {
  display: block;
}

/* If an image is placed as a direct child, show it like this. */
.ef_components-pub_row_with_image > div.__image > img,
.ef_components-pub_row_with_image > div.__image > a > img {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  outline: none;
  margin: 0;
}

/*
 * No image border if within a "card" div wrapper.
 * This allows to use the same inner html structure with or without 'card' div.
 */
.ef_components-card_horizontal .ef_components-pub_row_with_image > div.__image > img,
.ef_components-card_horizontal .ef_components-pub_row_with_image > div.__image > a > img {
  border: none;
}

/* Style-guide Bootstrap 4 breakpoint (sm) Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .ef_components-pub_row_with_image {
    display: flex;
  }

  .ef_components-pub_row_with_image > .__image {
    margin-bottom: 0;
  }

}