@import url("shared-related-contents.css");

:root {
  --shared-card-background: rgba(255, 255, 255, .5);
  --shared-card-hover-background: #fff;
  --shared-card-shadow: 0 6px 22px rgba(0, 0, 0, .12);
  --shared-card-hover-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  --shared-card-radius: 20px;
}

.shared-card-surface-children > :is(article, a, li) {
  border-radius: var(--shared-card-radius);
  background: var(--shared-card-background);
  box-shadow: var(--shared-card-shadow);
}

.shared-card-hover-children > :is(article, a, li) {
  transition: background-color .35s ease, box-shadow .4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .shared-card-hover-children > :is(article, a, li):hover {
    background: var(--shared-card-hover-background);
    box-shadow: var(--shared-card-hover-shadow);
  }
}

.shared-card-hover-children > :is(article, a, li):focus-visible,
.shared-card-hover-children > :is(article, a, li):focus-within {
  background: var(--shared-card-hover-background);
  box-shadow: var(--shared-card-hover-shadow);
}