.archive--grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 10px;
  position: relative;
  /* perspective: 1000px; */
  /* background-color: #fff; */
}

.grid-header,
.grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* .grid-row {
  display: contents;
} */

.archive h2 > div {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

.grid-row div,
.grid-header div {
  padding: 10px;
  /* border-bottom: 1px solid #ccc; */
}

/* .grid-header > div {
  background-color: hsl(var(--color-dark));
  color: var(--color-white);
} */

.archive--grid--rows a {
  color: inherit;
  text-decoration: none;
}

.archive--grid * {
  font-size: 1rem;
}

/* .archive--grid--rows a {
  position: relative;
}

.archive--grid--rows a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: hsl(var(--color-dark));
  width: 0;
  transition: width 0.3s ease-in-out;
  z-index: -1;
}

.archive--grid--rows a:hover::before {
  width: 100%;
  transition: width 0.6s ease-in-out;
}

.archive--grid--rows a:hover {
  color: var(--color-white) !important;
} */

/* hover */
.highlight {
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 0;
  background: hsl(var(--color-dark));
  color: var(--color-white);
  border-radius: 6px;
  /* animate position + skew together */
  transition:
    top 0.3s ease,
    height 0.3s ease,
    transform 0.8s ease-in;
  z-index: -1;
}

/* .highlight-1 {
  background: hsl(var(--color-dark));
} */

.grid-header > div {
  mix-blend-mode: difference;
  color: var(--color-white);
}

.archive--grid--rows a {
  transition: color 0.3s ease;
  mix-blend-mode: difference;
  color: var(--color-white);
}

.archive--grid--rows div:first-child {
  position: relative;
}

.archive--grid--rows div:first-child::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
  transition: opacity 0.3s ease;
}

.archive--grid--rows a:hover > div {
  padding-inline-start: 1.5rem;
  transition: padding-inline-start 0.3s ease;
}

.archive--grid--rows a:hover > div::before {
  transform: translateY(-50%) scale(1);
  transition: transform 0.3s ease;
}

.archive--grid--rows a div {
  padding-inline-start: 0;
  transition: padding-inline-start 0.3s ease;
}

/* .archive--grid--rows a:hover {
  color: var(--color-white) !important;
  transition: color 0.3s ease;
} */

/* .highlight a {
  color: var(--color-white);
}

.grid-header:hover {
  color: var(--color-white);
} */

.archive--grid--rows a > div {
  position: relative;
}

/* .archive--grid--rows a > div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 100%;
  background-color: var(--color-white);
} */

@media (max-width: 991px) {
  .grid-header,
  .grid-row {
    grid-template-columns: 3fr 1fr 2fr;
  }
}