header { min-height: 106px; padding: 12px 5%; }
.brand { display: inline-flex; text-align: center; }
.brand-badge { width: 82px; height: 82px; flex: 0 0 82px; align-items: center; justify-content: center; }
.brand-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.story-mark { display: flex; align-items: center; justify-content: center; font: inherit; letter-spacing: normal; }
.story-mark img { display: block; width: min(100%, 360px); height: auto; }
footer { padding: 20px 5%; }
footer .brand-badge { width: 62px; height: 62px; flex-basis: 62px; }
@media (max-width: 1000px) { .story-mark img { width: min(100%, 300px); } }
@media (max-width: 680px) {
  header { min-height: 82px; padding: 10px 6%; }
  .brand-badge { width: 60px; height: 60px; flex-basis: 60px; }
  .story-mark img { width: min(100%, 250px); }
  footer { padding: 20px 7%; }
}