/**
* Block Name: teaser
*/

section.teaser .link_area {
  border-radius: 20px;
  border-top: 1px solid var(--dunkelblau);
  border-right: 1px solid var(--dunkelblau);
  border-bottom: 3px solid var(--dunkelblau);
  border-left: 1px solid var(--dunkelblau);
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-column-gap: 30px;
  transition: all 200ms ease-out;
  padding: 15px;
}

section.teaser .link_area:hover {
  border-color: var(--rot);

  h4,
  p {
    color: var(--rot);
  }

  .weiter svg {
    transform: translateX(3px);
  }

  img {
    transform: scale(1.03);
  }
}

section.teaser .image_container {
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

section.teaser .image_container img {
  width: 100%;
  height: 100%;
  transition: all 300ms ease-out;
}

section.teaser .card_content h4 {
  margin-bottom: 10px;
  transition: all 200ms ease-out;
}

section.teaser .card_content p {
  overflow-wrap: break-word;
  transition: all 200ms ease-out;
}

section.teaser .card_content .weiter {
  color: var(--rot);
}

section.teaser .card_content .weiter svg {
  margin-left: 8px;
  transition: all 200ms ease-out;
}

section.teaser .card_content .weiter svg path {
  fill: var(--rot);
}

@media (max-width: 767px) {
  section.teaser .link_area {
    grid-template-columns: 1fr;
  }
}