/* Presentation for the original examples; no script is needed to compare them. */
.photo-guide { padding-top: 1.5rem; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.photo-example { min-width: 0; margin: 1.5rem 0; }
.photo-frame { border: 1px solid #d9dce4; border-radius: 12px; overflow: hidden; background: #fff; }
.photo-checker { background-color: #fff; background-image: conic-gradient(#e6e9ef 25%, transparent 0 50%, #e6e9ef 0 75%, transparent 0); background-size: 24px 24px; }
.photo-frame img { display: block; width: 100%; height: auto; }
.photo-example figcaption { font-size: .9rem; line-height: 1.6; margin-top: .75rem; color: #46546a; }
.photo-table-hint { font-size: .9rem; color: #536078; }
.photo-method { margin: 2rem 0; padding: 1rem 1.25rem; border: 1px solid #d9dce4; border-radius: 8px; }
.photo-method summary { font-weight: 700; cursor: pointer; }
.photo-method summary:focus-visible { outline: 3px solid #6244aa; outline-offset: 4px; }
.photo-method p { font-size: .95rem; }
@media (max-width: 575px) {
  .photo-grid { grid-template-columns: 1fr; gap: 0; }
}