.panel--memoria {
  border-color: color-mix(in srgb, var(--memoria-accent) 35%, transparent);
}

.panel--memoria::after {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--memoria-accent) 50%, transparent) 0%,
    transparent 65%
  );
}

.panel--imaginatio {
  border-color: color-mix(in srgb, var(--imaginatio-accent) 35%, transparent);
}

.panel--imaginatio::after {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--imaginatio-accent) 50%, transparent) 0%,
    transparent 65%
  );
}

.panel--ratio {
  border-color: color-mix(in srgb, var(--ratio-accent) 35%, transparent);
}

.panel--ratio::after {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ratio-accent) 50%, transparent) 0%,
    transparent 65%
  );
}

.panel--memoria .panel-heading,
.panel--memoria .panel-feature-link {
  color: var(--memoria-accent);
}

.panel--imaginatio .panel-heading,
.panel--imaginatio .panel-feature-link {
  color: var(--imaginatio-accent);
}

.panel--ratio .panel-heading,
.panel--ratio .panel-feature-link {
  color: var(--ratio-accent);
}

.nav-link[data-faculty="memoria"]::after,
.nav-link[data-faculty="imaginatio"]::after,
.nav-link[data-faculty="ratio"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.nav-link[data-faculty="memoria"]::after {
  background: var(--memoria-accent);
}

.nav-link[data-faculty="imaginatio"]::after {
  background: var(--imaginatio-accent);
}

.nav-link[data-faculty="ratio"]::after {
  background: var(--ratio-accent);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.panel-feature-link svg {
  width: 1rem;
  height: 1rem;
}