/* Base list styling */
ul#tutorials {
  gap: var(--space-2x);
  list-style: none;
}

ul#tutorials li p {
  margin-top: var(--space-half);
  font-weight: var(--font-weight-medium);
}

ul#tutorials li a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Tutorials list grid layout */
ul#tutorials.list {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(var(--grid-cards), 1fr)); */
}

ul#tutorials.list li {
  padding: calc(var(--space-quarter));
  margin: calc(-1 * var(--space-quarter));
}

/* ul#tutorials.list h3 {
  margin: 0 0 calc(var(--space-half));
  border-bottom: var(--border-width) solid var(--color-white);
  font-weight: var(--font-weight-bold);
} */

ul#tutorials.list h3 {
  margin: 0;
  margin-top: 0;
  border-bottom: var(--border-width) solid var(--color-white);
  height: calc(var(--space-2x));
}

ul#tutorials.list p {
  margin: 0;
  line-height: var(--line-height-index);
}

/* Hover states */
ul#tutorials.list li:hover {
  background: var(--color-white);
  color: var(--color-tutorials);
}

ul#tutorials.list li:hover h3 {
  border-bottom-color: var(--color-tutorials);
}

ul#tutorials.list li:hover p {
  color: var(--color-tutorials);
}

@media (max-width: 575px) {
  ul#tutorials.list li {
    width: 100%;
  }
}