/**
 * Cards
 *
 * The source order of the card is content first, then media.
 * If this is a media + text card, the link goes in the header
 * (H3) of the content, and is extended over the top of the image.
 * This prevents having to double-tab through each card, or wrapping
 * the entire contents of the card in a link.
 *
 * This setup assumes an image of 435x235. If your card has different
 * dimensions, override the aspect-ratio property in
 * `.card--content h3 a`. For videos (none I'm aware of yet), disable
 * the `:after` ruleset entirely.
 *
 * For image-only cards, wrap the image in a link as you normally would.
 *
 * [https://inclusive-components.design/cards]
 */
.view-mode--card {
  --aspect-ratio: 1.618/1;
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: 'media' 'content';
  grid-template-columns: 1fr;
  position: relative;
}
.view-mode--card:focus-within {
  outline: 1px dotted #004c65;
  outline-offset: 4px;
}
.view-mode--card .media {
  grid-area: media;
  position: relative;
}
.view-mode--card .media img {
  transition-duration: 0.1s;
  transition-property: all;
  transition-timing-function: ease-in-out;
  /* Animation */
}
.view-mode--card:hover .media img {
  transform: scale(1.05);
}
.view-mode--card .content {
  grid-area: content;
}
.view-mode--card .content > :last-child {
  margin-bottom: 0;
}
.view-mode--card .content h3 {
  margin-bottom: 0.5em;
}
.view-mode--card .content h3 a {
  color: inherit;
  text-decoration: none;
}
.view-mode--card .content h3 a:hover,
.view-mode--card .content h3 a:focus {
  text-decoration: underline;
  outline: none;
}
.view-mode--card .content h3 a:after {
  aspect-ratio: var(--aspect-ratio);
  background-color: transparent;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}


/*# sourceMappingURL=autry-viewmode-card.library.css.map*/