/**
 * List Items
 *
 * Extends the Card viewmode layout for a side-by-side
 * "results list" item. Media:Image is fixed at 225px, then
 * resizes to 175px @small, and finally the entire layout is
 * reset to a card @tiny.
 *
 * Again, the link-over-image setup is dependent on an image
 * size of 435x235. Adjust as needed, but the height of the
 * image MUST be known to use this. If it's a variable height,
 * then you'll either have to eliminate the link or duplicate
 * it on the image + remove the :after overlay rule.
 */
.view-mode--list-item {
  --media-width: clamp(115px, 35%, 215px);
  --areas: 'media content';
  --columns: var(--media-width) 1fr;
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: var(--areas);
  grid-template-columns: var(--columns);
  align-items: start;
  position: relative;
}
@container field-related (width <= 320px) {
  .view-mode--list-item {
    --areas: 'media' 'content';
    --columns: 1fr;
    --media-width: 100%;
  }
}
.view-mode--list-item:focus-within {
  outline: 1px dotted #004c65;
  outline-offset: 4px;
}
.view-mode--list-item .media {
  grid-area: media;
}
.view-mode--list-item .content {
  grid-area: content;
}
.view-mode--list-item .content > * {
  margin: 0;
}
.view-mode--list-item .content > * + * {
  margin-top: 0.25rem;
}
.view-mode--list-item .content :where(h3, .title) a {
  color: inherit;
  text-decoration: none;
}
.view-mode--list-item .content :where(h3, .title) a:hover,
.view-mode--list-item .content :where(h3, .title) a:focus {
  text-decoration: underline;
  outline: none;
}
.view-mode--list-item .content :where(h3, .title) a:after {
  content: '';
  display: block;
  width: var(--media-width);
  aspect-ratio: 1.618/1;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.view-mode--list-item .content .node-type {
  color: #ad5700;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}


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