.lgd-teaser {
  position: relative;
  border: 1px solid var(--color-grey-light);
}

.lgd-teaser:hover,
.lgd-teaser:focus,
.lgd-teaser:focus-within {
  background-color: var(--color-grey-lightest);
}

.lgd-teaser__image * {
  height: 100%;
}

.lgd-teaser__image img {
  object-fit: cover;
}

.lgd-teaser__content {
  padding-block-start: var(--spacing-large);
  padding-block-end: var(--spacing-xxlarge);
  padding-inline: var(--spacing-large);
}

@media screen and (min-width: 48rem) {
  .lgd-teaser__image + .lgd-teaser__content {
    margin-inline-start: 0;
    padding-block-start: var(--spacing-larger);
    padding-block-end: var(--spacing-xxlarge);
    padding-inline: var(--spacing-larger);
  }

  .lgd-teaser__image {
    flex: 0 0 40%;
  }
}

.lgd-teaser__content h3 {
  font-size: var(--font-size-2x-large);
}

.lgd-teaser__content a,
.lgd-teaser__content a:hover,
.lgd-teaser__content a:focus,
.lgd-teaser__content a:focus-within {
  text-decoration: none;
}

.lgd-teaser__content a::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.lgd-teaser__content a::after {
  position: absolute;
  right: var(--card-content-padding);
  bottom: var(--card-content-padding);
  display: inline-block;
  flex: 0 0 auto;
  width: var(--spacing-large);
  height: var(--spacing-large);
  margin-left: var(--spacing-smaller);
  content: "";
  vertical-align: calc((var(--spacing-small) - var(--card-content-padding)) * var(--spacing-smaller));
  background-color: currentColor;
  -webkit-mask-image: url(../../assets/icons/remix/Arrows/arrow-right-line.svg);
  mask-image: url(../../assets/icons/remix/Arrows/arrow-right-line.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
