/* A small selection of real resources, arranged like prints on a desk. */
.hp-resource-collage {
  position:relative;
  min-width:0;
  width:100%;
  margin-top:10px;
  padding-bottom:0;
  z-index:2;
}
.hp-resource-collage-list {
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:1 / 1.27;
  margin:0;
  padding:0;
  list-style:none;
}
.hp-showcase-card {
  position:absolute;
  margin:0;
  transform:rotate(var(--card-angle));
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.hp-showcase-card--system {
  --card-angle:7deg;
  z-index:1;
  top:0;
  right:3%;
  width:77%;
}
.hp-showcase-card--article {
  --card-angle:-6deg;
  z-index:3;
  top:27%;
  left:0;
  width:86%;
}
.hp-showcase-card--illustration {
  --card-angle:6deg;
  z-index:2;
  top:51%;
  right:0;
  width:73%;
}
.hp-showcase-link {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #e4e5e9;
  border-radius:15px;
  background:#fff;
  color:var(--hp-ink);
  text-decoration:none;
  box-shadow:0 16px 35px -15px rgba(21,28,45,.19),0 3px 8px -4px rgba(21,28,45,.12);
  transition:box-shadow .28s ease,border-color .28s ease;
}
.hp-showcase-media {
  display:block;
  overflow:hidden;
  background:#f5f6f8;
}
.hp-showcase-media img {
  display:block;
  width:100%;
  height:auto;
}
.hp-showcase-card--article .hp-showcase-media {background:#333438}
.hp-showcase-card--illustration .hp-showcase-media img {transform:scale(1.08)}
.hp-showcase-caption {
  display:flex;
  flex:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 16px 14px;
  background:#fff;
}
.hp-showcase-caption strong {
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}
.hp-showcase-caption small {
  display:block;
  margin-top:3px;
  color:#858992;
  font-size:10px;
  line-height:1.5;
  font-weight:400;
}
.hp-showcase-caption .hp-icon-arrow {flex:none;width:15px;height:15px;color:#808590}
.hp-showcase-card:hover,.hp-showcase-card:focus-within {
  z-index:5;
  transform:translateY(-7px) rotate(0deg);
}
.hp-showcase-card:hover .hp-showcase-link,
.hp-showcase-card:focus-within .hp-showcase-link {
  border-color:#cdd1db;
  box-shadow:0 24px 45px -19px rgba(21,28,45,.24),0 5px 12px -5px rgba(21,28,45,.13);
}
.hp-showcase-link:focus-visible {outline:2px solid var(--hp-blue);outline-offset:4px}
@media (max-width:900px) and (min-width:761px) {
  .hp-resource-collage {margin-top:6px}
  .hp-showcase-caption {padding:10px 12px}
  .hp-showcase-caption strong {font-size:12px}
  .hp-showcase-caption small {font-size:9px}
}
@media (max-width:760px) {
  .hp-resource-collage {margin:34px 0 -8px;padding:0}
  .hp-resource-collage-list {
    display:flex;
    align-items:stretch;
    gap:14px;
    width:calc(100% + 16px);
    margin-left:-8px;
    padding:12px 8px 26px;
    aspect-ratio:auto;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:8px;
    scrollbar-width:thin;
    scrollbar-color:#dfe1e6 transparent;
    overscroll-behavior-x:contain;
  }
  .hp-showcase-card {
    position:relative;
    inset:auto;
    flex:0 0 min(82%,280px);
    width:auto;
    transform:none;
    scroll-snap-align:start;
  }
  .hp-showcase-link {height:225px;border-radius:13px}
  .hp-showcase-media {order:0;flex:1;min-height:0}
  .hp-showcase-media img {height:100%;object-fit:cover}
  .hp-showcase-card--article .hp-showcase-media img {object-fit:contain}
  .hp-showcase-caption {order:1}
  .hp-showcase-card:hover,.hp-showcase-card:focus-within {transform:none}
}
@media (prefers-reduced-motion:reduce) {
  .hp-showcase-card,.hp-showcase-link {transition:none}
  .hp-showcase-card:hover,.hp-showcase-card:focus-within {transform:rotate(var(--card-angle))}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .hp-showcase-card:hover,.hp-showcase-card:focus-within {transform:none}
}

.hp-visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.hp-collage-reset {
  position:absolute;
  z-index:1;
  right:0;
  top:-42px;
  min-height:36px;
  padding:5px 11px;
  border:1px solid var(--hp-line);
  border-radius:100px;
  background:#fff;
  color:var(--hp-copy);
  font-size:11px;
}
.hp-collage-reset:hover {color:var(--hp-ink);border-color:#c5cad3}
.hp-collage-reset span {font-size:16px;margin-right:3px}
@media (min-width:761px) {
  .hp-resource-collage.is-draggable .hp-showcase-card {
    translate:var(--card-x,0px) var(--card-y,0px);
  }
  .hp-resource-collage.is-draggable .hp-showcase-link {
    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
  }
  .hp-resource-collage.is-draggable img {-webkit-user-drag:none;user-select:none}
  .hp-resource-collage.is-draggable .hp-showcase-card.is-dragging {
    transform:rotate(0deg) scale(1.025);
    transition:none;
    will-change:translate;
  }
  .hp-resource-collage.is-draggable .hp-showcase-card.is-dragging .hp-showcase-link {
    cursor:grabbing;
    box-shadow:0 28px 50px -20px rgba(21,28,45,.28),0 6px 14px -5px rgba(21,28,45,.16);
  }
}