/*
 * News plugin layout "newsteaser" (Templates/News/List.html, section "newsteaser"), used in the big left
 * column of ct-1-3rows -- Figma node 4381:33013: 16:9 image, headline, news teasers, button.
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer molecules {
  .news-teaser {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
  }
  .news-teaser__img {
    display: block;
  }
  .news-teaser__img img {
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-default);
    display: block;
    inline-size: 100%;
    object-fit: cover;
  }
  .news-teaser__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    align-items: flex-start;
  }
  .news-teaser__body > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
  }
  .news-teaser__item {
    display: flex;
    flex-direction: column;
    gap: var(--button-gap-xs);
  }
  .news-teaser__item h4,
  .news-teaser__item p {
    margin: 0;
  }
  .news-teaser__item h4 {
    margin-block-end: calc(var(--text-gap-h3) - var(--button-gap-xs));
  }
  .news-teaser__more {
    display: inline-flex;
    align-items: center;
    gap: var(--button-icon-gap);
    color: var(--color-primary-orange);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    line-height: 1.5;
    text-decoration: none;
  }
  .news-teaser__more .icon-arrow-up-right {
    font-size: 1.5rem;
    line-height: 1;
  }
  .news-teaser__all {
    margin-block-start: calc(var(--button-gap-default) - var(--gap-m));
  }
}