Modèle:Card/styles.css

.template-navpills {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 6rem;
  font-size: var(--font-size-small);
}

.template-navpill {
  position: relative;
  border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-medium);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xx-small);
  overflow: hidden;
}

.template-navpill-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.template-navpill img {
    transform: translate(30%, -30%);
    width: 100%;
    height: auto;
    float: right;
}
.template-navpill:hover img {
    transform: translate(10%, -35%) scale(.9);
    transition: all 300ms;
}

.template-navpill>.template-navpill-background+a {
  color: #fff;
  text-shadow: -1px 0 .2em #1f1f1f, 0 1px .2em #1f1f1f, 1px 0 .2em #1f1f1f, 0 -1px .2em #1f1f1f;
}

.template-navpill>.template-navpill-background+a.new {
  color: #fff;
  text-shadow: -1px 0 .2em #e64234, 0 1px .2em #e64234, 1px 0 .2em #e64234, 0 -1px .2em #e64234;
}

.template-navpill>a {
  position: relative;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  color: var(--color-emphasized);
  text-decoration: none;
  height: 100%
}