/* Real photographs in three restrained examples of their use. */
.home .applications { background: #fafafa; }
.applications .application-preview {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  background: #eeedef;
  overflow: hidden;
}
.application-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.preview-browser {
  width: 84%;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 12px 22px #17161924;
  overflow: hidden;
}
.preview-browser-bar { display: flex; gap: 4px; padding: 8px 10px; background: #28252b; }
.preview-browser-bar i { width: 4px; height: 4px; border-radius: 50%; background: #b8b2bc; }
.preview-browser-page { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 12px; gap: 12px; }
.preview-browser-page img { height: auto; }
.preview-type { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.preview-type span { display: block; }
.preview-heading-line { width: 88%; height: 5px; background: #3b243e; margin-bottom: 5px; }
.preview-heading-line:nth-child(2) { width: 63%; margin-bottom: 16px; }
.preview-copy-line { width: 95%; height: 2px; background: #b8b2bc; margin-bottom: 5px; }
.preview-copy-line:last-of-type { width: 68%; }
.preview-button { margin-top: 12px; width: 42%; height: 13px; background: #28252b; }
.preview-publication {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 84%;
  background: #fff;
  box-shadow: 0 12px 22px #17161924;
  transform: rotate(-4deg);
}
.preview-publication-photo { padding: 10px; }
.preview-publication-photo img { height: auto; }
.preview-publication-page { display: flex; flex-direction: column; justify-content: center; padding: 18px; border-left: 1px solid #e5e2e7; }
.preview-publication-rule { display: block; width: 22%; height: 2px; margin-top: 22px; background: #3b243e; }
.preview-frame {
  width: 50%;
  padding: 12px;
  background: #fff;
  border: 5px solid #28252b;
  box-shadow: 5px 10px 16px #17161920;
}
.preview-frame img { height: auto; }
@media (min-width: 761px) and (max-width: 1100px) {
  .applications .application-grid { gap: 24px; }
  .preview-browser-page { padding: 8px; gap: 8px; }
  .preview-publication-photo { padding: 7px; }
  .preview-publication-page { padding: 10px; }
  .preview-heading-line:nth-child(2) { margin-bottom: 10px; }
  .preview-button { margin-top: 6px; }
  .preview-frame { padding: 8px; border-width: 4px; }
}
@media (max-width: 760px) {
  .applications .application-preview { max-width: 440px; margin: 0 auto 20px; }
  .applications .application-grid { gap: 40px; }
}