.section-feed-content-node {
  $self: &;

  @function ab($a, $b: null) {
    @if $b != null {
        @return $b;
    }
    @return $a;
  }

  $image-size: 112px ;
  $image-mobile-width: null !default;
  $image-mobile-height: null !default;
  $image-width: ab($image-size, $image-mobile-width);
  $image-height: ab($image-size, $image-mobile-height);

  $image-desktop-width: 250px !default;
  $image-desktop-height: 167px !default;


  display: flex;
  width: 100%;

  @include media-breakpoint-up(md) {
    flex-direction: row-reverse;
    padding-bottom: 0;
    border-bottom: none;
  }

  &__sponsored-by {
    margin-bottom: 6px;
    @include skin-typography($style: "sponsored-by");
  }

  &__contents {
    width: 100%;
  }

  &__body {
    @include media-breakpoint-up(md) {
      max-width: 700px;
    }
  }

  &__image-wrapper {
    width: $image-width;
    min-width: $image-width;
    height: $image-height;
    margin-left: 15px;
    @include media-breakpoint-up(md) {
      width: $image-desktop-width;
      min-width: $image-desktop-width;
      height: $image-desktop-height;
      margin-right: 15px;
      margin-left: 0;
    }
  }

  &__image {
    width: $image-width;
    height: $image-height;
    object-fit: cover;
    object-position: left;
    border: 1px solid rgba(239, 239, 239, .9);
    @include media-breakpoint-up(md) {
      width: $image-desktop-width;
      height: $image-desktop-height;
    }
  }

  &__website-section-name {
    margin-bottom: 6px;
    @include skin-typography($style: "slug-small", $link-style: "primary", $breakpoint: sm);
  }

  &__content-short-name {
    width: 100%;
    @include skin-typography($style: "header-1.5", $link-style: "primary", $breakpoint: sm);
  }

  &__content-teaser {
    display: none;
    margin-top: 6px;
    margin-bottom: 0.25rem;
    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
    @include media-breakpoint-up(md) {
      display: block;
    }
  }

  &__content-event-dates {
    margin-top: 10px;
    @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
  }
  &__content-start-date,
  &__content-end-date {
    &::before {
      font-weight: $font-weight-bold;
      content: "Date: ";
    }
  }
  &__content-start-date + #{ $self }__content-end-date {
    &::before {
      font-weight: $font-weight-normal;
      content: " -  ";
    }
  }

  &__multidates {
    display: flex;
    flex-direction: row;
  }

  &__content-company {
    font-weight: $theme-content-attribution-prefix-font-weight;
    &::before {
      margin-right: $theme-content-attribution-prefix-margin;
      font-weight: $theme-content-attribution-prefix-font-weight;
      content: "From";
    }
  }

  &__content-authors {
    font-weight: $theme-content-attribution-prefix-font-weight;
  }

  .btn-primary {
    margin-top: 10px;
  }

  &__content-published {
    margin-top: 10px;
    @include skin-typography($style: "date");
  }

  &__content-sponsors {
    #{ $self }__content-sponsors-label {
      @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
      font-weight: $font-weight-bold;
    }
    &--has-logo {
      #{ $self }__content-sponsors {
        display: flex;
        flex-direction: column;
        .content-sponsors-seporator {
          display: none;
        }
      }
    }
  }

  &__content-speakers {
    .section-feed-content-node {
      &__content-speakers-label, &__content-name, &__content-title {
        @include skin-typography($style: "teaser-text-1", $link-style: "primary", $breakpoint: sm);
      }
      &__content-speakers-label {
        font-weight: $font-weight-bold;
      }
    }
  }

  &--full-width-native-ad {
    padding: 24px;
    background-color: $gray-100;
    border-radius: 4px;
    #{ $self } {
      &__content-teaser {
        display: block;
      }
    }
  }
  &--video-content-type {
    #{ $self } {
      &__image-wrapper {
        position: relative;
        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 50px;
          height: 50px;
          content: "";
          background-image: url("data:image/png;base64,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");
          filter: brightness(0) invert(1) drop-shadow(2px 2px 2px rgba(0, 0, 0, .5));
          background-size: contain;
          opacity: .6;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

.node-list {
  $self: &;
  span.section-feed-content-node {
    &__content-sponsors {
      display: inline;
    }
  }
  &--section-feed {
    #{ $self } {
      &__node {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: none;
        @include marko-web-node-list-border(border-bottom);
        @include media-breakpoint-up(md) {
          padding-top: 15px;
          padding-bottom: 15px;
          border-bottom: none;
        }
      }

      &__nodes {
        padding-top: 0;
        padding-bottom: 0;
        @include marko-web-node-list-border(border-top);
        @include media-breakpoint-up(md) {
          border-top: none;
        }
      }
    }
  }
  &--company-related-feed,
  &--company-categories-feed {
    #{ $self } {
      &__header {
        @include skin-typography($style: "section-header");
        padding-bottom: 10px;
        margin-top: 20px;
        font-size: 26px;
        border-bottom: 1px solid $gray-700;
      }
    }
    .section-feed-content-node {
      @include media-breakpoint-up(md) {
        flex-direction: row;
      }
    }
  }
  &--company-categories-feed {
    #{ $self } {
      &__node {
        padding-top: .5rem;
        padding-bottom: 0;
      }
    }
  }
  //@todo this should also be dependend on the image width/height differing from 112
  @include media-breakpoint-down(sm) {
    &--section-feed-mobile-cards {
      .section-feed-content-node {
        &:first-child {
          border-top: none;
        }
        flex-direction: column-reverse;
        .section-feed-content-node__image-wrapper {
          margin-left: 0;
          margin-bottom: map-get($spacers, block);
        }
        .section-feed-content-node__content-teaser {
          display: initial;
        }
      }
    }
  }
}