/*
================================================
  Teaser component
================================================
*/

.teaser {
  --teaser-border-radius: .25rem;
  --teaser-padding: 1rem;
  --teaser-shadow: 0px 0px 4px 0px #00000040;
  --teaser-image-border: 1px solid var(--neutral-100);
  --teaser-title-color: var(--neutral-600);

  display: flex;
  flex-direction: column;
  background: var(--bs-white);
  border-radius: var(--teaser-border-radius);
  color: inherit;
  overflow: hidden;
  box-shadow: var(--teaser-shadow);
  padding: var(--teaser-padding);
}

.teaser__image {
  width: 100%;
  overflow: hidden;
  margin-bottom: 1rem;
}

.teaser__image img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--teaser-image-border);
}

.teaser__title {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--teaser-title-color);
  text-decoration: none;
}

.teaser__footer {
  margin-top: auto;
  padding-top: 1rem;

  .btn {
    width: 100%;
  }
}


/* Grid */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 1.5rem;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .teaser-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.teaser-grid__item {
  height: 100%;
  > .teaser {
    height: 100%;
  }
}