Template:Navpills

.template-navpills {

   display: grid;
   gap: var( --space-xs );
   grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
   grid-auto-rows: 3rem;
   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-background:after { content: ;

   position: absolute;
   inset: 0;
   background: linear-gradient(to right, #000, transparent);
   transition: transform 250ms ease;

}

.template-navpill-background img { width: 100%; height: 100%; object-fit: cover; transition: var( --transition-hover );

   transition-property: transform;

}

.template-navpill:hover .template-navpill-background::after {

   transform: translateX( -100% );

}

.template-navpill:hover .template-navpill-background img { transform: scale( 1.1 ); }

.template-navpill > a { position: relative; padding: 0 var( --space-md );

   display: flex;
   align-items: center;
   color: var( --color-emphasized );
   text-decoration: none;

height: 100%; }

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

.template-navpill:hover {

   background: var( --background-color-button-quiet--hover );

}

.template-navpill:active {

   background: var( --background-color-button-quiet--active );

}