.moe-media-mentions {
  scroll-margin-top: 84px;
}

.moe-media-mentions::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(242, 182, 50, .16), transparent 34%),
    linear-gradient(180deg, #f6f4ef, #efe9dc) !important;
}

.moe-media-mentions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.moe-media-mention {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(212, 147, 32, .32);
  border-top: 4px solid #d49320;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff4ca 0%, #fffaf0 54%, #fffdf8 100%);
  box-shadow: 0 16px 36px rgba(49, 37, 16, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.moe-media-mention:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(49, 37, 16, .11);
}

.moe-media-mention .moe-media-mention__publication {
  margin: 0 0 8px;
  color: #8b5b08;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.moe-media-mention h3 {
  margin: 0 0 10px;
  color: #162028;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.16;
}

.moe-media-mention > p:not(.moe-media-mention__publication) {
  margin: 0 0 18px;
  color: #4b5d66;
  line-height: 1.55;
}

.moe-media-mention__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  margin-top: auto;
  padding-bottom: 3px;
  border-bottom: 2px solid #d49320;
  color: #75500e;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}

.moe-media-mention__link:hover {
  border-color: #162028;
  color: #162028;
}

.moe-media-mention__link:focus-visible {
  border-radius: 3px;
  outline: 3px solid rgba(45, 102, 140, .42);
  outline-offset: 4px;
}

.moe-media-mention__badge {
  white-space: nowrap;
}

.moe-media-mention__arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform .16s ease;
}

.moe-media-mention__link:hover .moe-media-mention__arrow {
  transform: translate(2px, -2px);
}

@media (max-width: 840px) {
  .moe-media-mentions__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moe-media-mention,
  .moe-media-mention__link,
  .moe-media-mention__arrow {
    transition: none;
  }
}