/* ==========================================================================
   Osmo Supply — Directional List Hover
   Unveraendert uebernommen. Die Kachel faehrt aus der Richtung herein, aus
   der die Maus kommt, und in dieselbe Richtung wieder hinaus. Die Farben
   werden in style.css auf das Farbschema der Smileys gezogen; hier steht
   der Originalstand.
   ========================================================================== */

.directional-list {
  color: #ffecde;
  flex-flow: column;
  width: 100%;
  max-width: 50em;
  display: flex;
  position: relative;
}

.directional-list__info {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  display: flex;
  position: relative;
}

.direcitonal-list__eyebrow {
  color: #c96d4d;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .75em;
  line-height: 1;
}

.directional-list__item {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  color: inherit;
  justify-content: space-between;
  align-items: center;
  margin-top: -1px;
  padding: 2.25em 1.5em;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.directional-list__col-award {
  min-width: 30%;
  position: relative;
}

.directional-list__col-client {
  flex: 1;
  position: relative;
}

.directional-list__col-year {
  flex: none;
  min-width: 3em;
  position: relative;
}

.direcitonal-list__p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1;
}

.directional-list__border {
  z-index: 2;
  opacity: .3;
  background-color: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.directional-list__border.is--item {
  top: 0;
  bottom: auto;
}

.directional-list__hover-tile {
  background-color: #ab4e2d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[data-directional-hover-tile] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-100%);
  will-change: transform;
}