main.news-feed {
  --featured-card-height: 20rem;

  .newsfeed-empty-icon {
    /*Apply theme-based styling to the empty newsfeed inline SVG icon*/
    --newsfeed-empty-icon-color: var(--theme-color-darker);

    #background path {
      fill: color-mix(in srgb, var(--newsfeed-empty-icon-color), white 90%);
    }

    #foreground {
      path:first-of-type {
        fill: var(--newsfeed-empty-icon-color);
      }

      path:not(:first-of-type) {
        stroke: var(--newsfeed-empty-icon-color);
      }
    }

    &.newsfeed-empty-icon--alert {
      --newsfeed-empty-icon-color: var(--yellow-darker);
    }
  }

  .cards-container {
    max-height: 100vh;

    .cards-wrapper .card--article--featured {
      height: var(--featured-card-height);
    }
  }

  --card-thumbnail-max-width: 40%;
  --article-card-flex-direction: row;
  --article-card-border-radius: var(--border-radius) 0 0 var(--border-radius);
  --article-card-padding: calc(0.5rem - 1px) calc(1rem - 1px) calc(0.5rem - 1px) 0;
  --article-card-gap: 1rem;

  .card--article {
    flex-direction: var(--article-card-flex-direction);
    height: 100%;
    min-height: 12rem;
    padding: 0;
    gap: var(--article-card-gap);

    & > .card__header {
      flex: 1;
      gap: 0.5rem;
      padding: var(--article-card-padding);
    }
  }
}

.card.card--article.card--small {
  min-height: unset;

  header.card__header {
    justify-content: center;
  }

  .card__content {
    display: flex;
    flex-direction: column;
    padding: var(--article-card-padding);

    header.card__header {
      padding: unset;
    }
  }
}

.card__thumbnail-wrapper, .article__thumbnail-wrapper {
  aspect-ratio: 16 / 9 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--light-gray);
  border-radius: var(--article-card-border-radius);
  display: inline-flex;
  height: auto;
  margin: 0;
  max-width: var(--card-thumbnail-max-width);
  overflow: hidden;
  position: relative;
  width: 100%;

  &:not(:has(.article__thumbnail)) {
    background-color: var(--light-gray);
    background-image: url("/assets/ryalto_new_logo-1bba2265.png");
    background-size: 140px;
    background-blend-mode: color-dodge;
  }

  .card__badges {
    left: 0.5rem;
    position: absolute;
    top: 0.5rem;
  }
}

.article__published-details {
  align-items: flex-end;
  flex: 1;

  .card.card--user {
    min-width: unset;
  }
}