.document-orientation-notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid #b8d2e6;
  border-radius: .75rem;
  background: #f0f8ff;
  color: #123f62;
}

.document-orientation-notice strong {
  display: block;
  margin-bottom: .25rem;
}

.document-orientation-notice p {
  margin: 0;
}

.document-orientation-guide {
  display: grid;
  flex: 0 0 7rem;
  aspect-ratio: 16 / 9;
  place-items: center;
  border: 2px dashed #0d527d;
  border-radius: .4rem;
  background: repeating-linear-gradient(135deg, #e2f0fa 0, #e2f0fa 5px, #d6e9f5 5px, #d6e9f5 10px);
  color: #0d527d;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
}

@media (max-width: 600px) {
  .document-orientation-notice {
    align-items: flex-start;
  }

  .document-orientation-guide {
    flex-basis: 6rem;
  }
}