.content-teaser {
  padding: 72px var(--container-padding);
}

.content-teaser__inner {
  width: min(100%, var(--container-max));
  margin: 0 auto;
}

.content-teaser__header { 
  text-align: center; 
  margin-bottom: 28px; 
}

.content-teaser__kicker { 
  font-family: var(--font-body); 
  font-size: 16px; 
  color: var(--color-text-primary);
  margin-bottom: 6px; 
}

.content-teaser__title { 
  font-family: var(--font-heading);
  font-weight: var(--text-regular);
  font-size: 52px; 
  line-height: 1.2; 
  margin: 0 0 8px; 
}

.content-teaser__intro { 
  font-family: var(--font-body); 
  color: var(--color-text-secondary); 
  margin: 0 auto; 
  max-width: 720px; 
}

.content-teaser__grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 50px; 
  margin-top: 28px; 
}

.ct-card { 
  position: relative; 
  background: #fff; 
  border-radius: 16px; 
  border: 1px solid transparent;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Active state: add border and subtle shadow */
.ct-card:active,
.ct-card--active,
.ct-card.is-active { 
  border: 1px solid #e5e7eb; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Hover highlight */
.ct-card:hover,
.ct-card-link:hover .ct-card {
  padding: 12px;
  background-color: #F2F2F2;
}

.ct-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ct-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ct-card__media img { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 12px; 
}

.ct-card__body { 
  padding: 12px 4px; 
}

.ct-card__category {
  display: inline-block;
  font-size: 14px;
  color: #374151;
  background: #F3F4F6;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-weight: 500;
}

.ct-card__title { 
  font-family: var(--font-body); 
  font-weight: 700; 
  font-size: 24px; 
  line-height: 1.3; 
  margin: 0 0 8px; 
}

.ct-card__excerpt { 
  color: var(--color-text-secondary); 
  margin: 0 0 12px; 
  line-height: 1.6; 
}

.ct-card__meta { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.ct-card__avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 999px; 
}

.ct-card__author { 
  font-weight: 600; 
}

.ct-card__readtime { 
  color: #6b7280; 
  font-size: 14px; 
}

.content-teaser__actions { 
  display: flex; 
  justify-content: center; 
  margin-top: 100px; 
}

.content-teaser__button { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding: 10px 16px; 
  border-radius: 10px; 
  text-decoration: none; 
  font-weight: 600; 
  border: 1px solid #d1d5db; 
  background: #ffffff; 
  color: var(--color-text-primary); 
}

@media (min-width: 960px) { 
  .content-teaser { padding: 88px var(--container-padding); }
  .content-teaser__grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px; 
  }
  .ct-card__title { font-size: 26px; }
  .ct-card:hover,
  .ct-card-link:hover .ct-card {
    padding: 12px;
    background-color: #F2F2F2;
  }
}

@media (max-width: 599px) {
  .content-teaser__title { font-size: 40px; }
  .ct-card:hover,
  .ct-card-link:hover .ct-card {
    padding: 12px;
    background-color: #F2F2F2;
  }
}