@layer ds_components {
  .comp-teaser {
    display: block;
    text-decoration: none;
    text-align: center;
    transition: var(--ds-component-teaser-transition);
    outline: var(--ds-component-teaser-border-width) solid
      var(--ds-skin-background);
    outline-offset: var(--ds-component-teaser-outline-offset);
    border-radius: var(--ds-component-teaser-radius);
    overflow: hidden;
    /* box-shadow: var(--ds-component-teaser-box-shadow); */
    background-color: var(--ds-component-teaser-color-background);
    color: var(--ds-component-teaser-color-content);

    &:hover,
    &:focus-visible {
      filter: var(--ds-component-teaser-filter-hover);
      outline-color: var(--ds-component-teaser-outline-color-hover);
    }

    img {
      outline: var(--ds-component-teaser-image-outline-width) solid
        var(--ds-skin-background);
    }

    span {
      display: block;
      font-size: var(--ds-component-teaser-font-size-headline);
      font-family: var(--ds-component-teaser-font-family-headline);
      font-weight: var(--ds-component-teaser-font-weight-headline);
      line-height: var(--ds-component-teaser-line-height-headline);
      padding-block-start: calc(
        var(--ds-component-teaser-padding-block-headline) +
          var(--ds-component-teaser-image-outline-width)
      );
      padding-block: var(--ds-component-teaser-padding-block-headline);
    }
  }
}