.eg-sale-portfolio {
  background: var(--eg-color-cream);
  color: var(--eg-color-ink);
  padding: 72px 0;
  font-family: var(--font-classic-body), Montserrat, sans-serif;
}
.eg-sale-portfolio__shell {
  width: min(var(--eg-width-wide), calc(100% - 2 * var(--eg-gutter)));
  margin: auto;
}
.eg-sale-portfolio header { max-width: 820px; margin-bottom: 32px; }
.eg-sale-portfolio h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.25; }
.eg-sale-portfolio p { font-size: 17px; line-height: 1.7; }
.eg-sale-portfolio__eyebrow { font-weight: 700; }
.eg-sale-portfolio__examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.eg-sale-portfolio__example { display: block; background: white; color: inherit; border-radius: var(--eg-radius-panel); overflow: hidden; text-decoration: none; }
.eg-sale-portfolio__example img { display: block; width: 100%; height: 360px; object-fit: cover; }
.eg-sale-portfolio__example > div { padding: 24px; }
.eg-sale-portfolio__example h3 { font-family: var(--font-classic-body), Montserrat, sans-serif; font-size: 20px; line-height: 1.5; margin: 0; }
.eg-sale-portfolio__example p { margin: 12px 0; }
.eg-sale-portfolio__example span, .eg-sale-portfolio__closing a { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.eg-sale-portfolio__example:focus-visible, .eg-sale-portfolio a:focus-visible { outline: 3px solid var(--eg-color-teal); outline-offset: 4px; }
.eg-sale-portfolio__example:hover span { text-decoration-thickness: 2px; }
.eg-sale-portfolio__closing { margin: 28px 0 0; }
@media (max-width: 760px) {
  .eg-sale-portfolio { padding: 48px 0; }
  .eg-sale-portfolio__shell { width: calc(100% - 40px); }
  .eg-sale-portfolio__examples { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .eg-sale-portfolio__example img { height: 320px; }
}