@import url('./globals.css');

link-card {
  flex-grow: 1;
  aspect-ratio: 3 / 2;
  display: inline-block;
  padding: 1rem;
  min-width: 280px;
  height: 140px;
  margin: 20px;
  border-radius: 10px;
}

link-card.none {
  display: none;
}

link-card .title {
  margin-bottom: 10px;
}

link-card .title,
link-card p[slots='description']{
  text-transform: lowercase;
}

link-card .title-uppercase{
  text-transform: uppercase;
}

link-card .title:first-letter,
link-card p[slots='description']:first-letter{
  text-transform: capitalize;
}

link-card:hover,
link-card:focus {
  background-color: color-mix(in srgb, var(--l-blue), transparent 60%);
  cursor: pointer;
}