/* Original ink frames: the approved mix of drawn, scalloped and petite ornate. */
.photo-crop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.drawn-photo,
.drawn-photo.gallery-photo {
  --frame-width: 12px;
  border: var(--frame-width) solid transparent;
  border-image-source: url("drawn-frame-a.svg");
  border-image-slice: 30;
  border-image-width: 1;
  border-image-repeat: stretch;
  background-color: #fcfaf3;
}
:is(.gallery-column:nth-child(even) .drawn-photo,
  .story-card:nth-child(even) .drawn-photo) {
  border-image-source: url("drawn-frame-b.svg");
}
:is(.gallery-column:nth-child(3n + 1) .drawn-photo,
  .story-card:nth-child(3n + 1) .drawn-photo) {
  border-image-source: url("drawn-frame-scalloped.svg");
  border-image-repeat: round;
}
:is(.gallery-column:nth-child(3n) .drawn-photo,
  .story-card:nth-child(3n) .drawn-photo,
  .gallery-pair .drawn-photo:nth-child(2)) {
  border-image-source: url("drawn-frame-ornate.svg");
  border-image-repeat: round;
}
/* Keep the frame outside the crop, including while a card photo zooms on hover. */
.drawn-photo.gallery-photo { padding: 0; }
.drawn-photo.article-photo-frame { --frame-width: 20px; }
.article-photo-frame .photo-crop { height: auto; }
@media (max-width: 680px) {
  .drawn-photo,
  .drawn-photo.gallery-photo { --frame-width: 11px; }
  .drawn-photo.article-photo-frame { --frame-width: 14px; }
}