.library-entrance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  grid-template-areas: "intro example" "links example";
  align-content: center;
  align-items: end;
  column-gap: clamp(32px, 5vw, 78px);
  padding: clamp(8px, 1.2vw, 20px) 0 clamp(24px, 3vw, 42px);
  color: var(--navy);
}
.library-entrance-intro {grid-area: intro; min-width: 0;}
.library-entrance-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px;
  margin: 0 0 19px; color: #425c73; font-size: .96rem; line-height: 1.65;
}
.library-entrance-name strong {color: var(--navy); font-size: 1.15rem; font-weight: 650; letter-spacing: .08em;}
.library-entrance-name span {border-left: 1px solid #b0becb; padding-left: 14px;}
.library-entrance .library-entrance-title {
  margin: 0 0 18px; color: var(--navy); font-family: var(--serif);
  font-size: clamp(2rem, 3.1vw, 2.9rem); font-weight: 600;
  line-height: 1.46; letter-spacing: .012em; text-wrap: initial;
}
.library-entrance-title span {display: block;}
.library-entrance-lead {
  margin: 0; max-width: 29em; color: var(--ink);
  font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.9;
}
.library-entrance-links {
  grid-area: links; align-self: start; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 23px; margin-top: 22px;
}
.library-entrance-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1rem; line-height: 1.5; font-weight: 600;
}
.library-entrance-primary {
  gap: 14px; padding: 10px 18px; background: var(--navy);
  color: white; text-decoration: none; border-radius: 2px;
}
.library-entrance-primary:hover {background: #234568; color: white;}
.library-entrance-secondary {color: var(--navy); text-underline-offset: .26em;}
.library-entrance-links a:focus-visible {outline: 3px solid #35658d; outline-offset: 4px;}
.library-entrance-figure {
  grid-area: example; margin: 0; min-width: 0; align-self: center;
  display: grid; justify-items: stretch;
}
.library-entrance-figure img {
  width: min(100%, 365px); height: auto; display: block; justify-self: center;
}
.library-entrance-figure figcaption {
  border-top: 1px solid #beccd6; margin-top: 6px;
  padding: 10px 0 0; color: var(--navy); text-align: left;
}
.library-example-title {
  margin: 0 0 9px; color: #3f566b; font-size: .96rem; line-height: 1.6;
}
.library-example-flow {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(7px, 1vw, 16px); align-items: center;
}
.library-example-flow div {
  padding-left: 12px; border-left: 2px solid #aabdcf; min-width: 0;
}
.library-example-flow div:last-child {border-left-color: #b88652;}
.library-example-flow div span {display: block; color: #425c73; font-size: .94rem; line-height: 1.65;}
.library-example-flow strong {display: block; margin-top: 3px; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.55; font-weight: 600;}
.library-example-arrow {align-self: center; font-size: 1.22rem; color: #526c84;}
@media (max-width: 800px) {
  .library-entrance {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "example" "links";
    gap: 17px; padding: 0 0 24px;
  }
  .library-entrance-name {margin-bottom: 10px;}
  .library-entrance .library-entrance-title {font-size: clamp(1.8rem, 5.6vw, 2.35rem); margin-bottom: 10px;}
  .library-entrance-lead {max-width: 38em; line-height: 1.85;}
  .library-entrance-figure {width: min(100%, 510px); justify-self: center;}
  .library-entrance-figure img {width: min(66%, 245px);}
  .library-entrance-links {margin-top: 0; gap: 4px 18px;}
}
@media (max-width: 380px) {
  .library-entrance-name {gap: 4px 9px;}
  .library-entrance-name span {padding-left: 9px;}
  .library-entrance .library-entrance-title {font-size: 1.65rem;}
  .library-example-flow {gap: 6px;}
  .library-example-flow div {padding-left: 7px;}
  .library-entrance-links {column-gap: 14px;}
}