/**
* Block Name: teaser_cards
*/

section.teaser_cards .row {
  display: grid;
}

section.teaser_cards .row.grid-4-col {
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
}

section.teaser_cards .row.grid-6-col {
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 30px;
}

section.teaser_cards .card {
  text-decoration: none;
  color: var(--black);
  box-shadow: 0px 14px 14px 0px rgba(26, 51, 72, 0.04),
    0px 4px 4px 0px rgba(112, 136, 158, 0.05);
  border: none;
}

section.teaser_cards .card .p-30 {
  padding: 30px;
}

section.teaser_cards .card .img_wrapper {
  overflow: hidden;
  height: 400px;
}

section.teaser_cards .card .img_wrapper img {
  transition: transform 500ms ease-in-out;
  height: 100%;
}

section.teaser_cards .card:hover .img_wrapper img {
  transform: scale(1.2);
}
section.teaser_cards .card img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

section.teaser_cards .card p {
  color: var(--grey);
}

section.teaser_cards .card span {
  gap: 8px;
  transition: color 200ms ease-in-out;
}

section.teaser_cards .card:hover span {
  color: var(--primary-blue);
}

section.teaser_cards .card span svg {
  transition: transform 200ms ease-in-out;
}

section.teaser_cards .card:hover span svg {
  transform: translateX(3px);
}

section.teaser_cards .card span svg path {
  transition: fill 200ms ease-in-out;
}

section.teaser_cards .card:hover span svg path {
  fill: var(--primary-blue);
}

@media (max-width: 992px) {
  section.teaser_cards .no-gutters {
    flex-wrap: wrap !important;
  }
  section.teaser_cards .row.grid-4-col,
  section.teaser_cards .row.grid-6-col {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-row-gap: 30px;
  }
}