/* Only the two artwork placements change. The original hero height is retained. */
@media screen {
  .tk-art-swapped .tk-hero-mark {
    display: grid;
    place-items: center;
    width: 176px;
    height: 160px;
  }
  .tk-art-swapped .tk-hero-mark > .ck-care-hen {
    width: 176px;
    max-width: 100%;
    margin: 0;
  }
  .tk-art-swapped .tk-hero-mark > .ck-care-hen > .ck-scene-visual {
    display: block;
    width: 100%;
    height: auto;
  }
  .tk-art-swapped .tk-checklist-rooster-mark { display: block; flex: none; }
  .tk-art-swapped #panel-daily .tk-checklist-rooster-mark > .tk-checklist-rooster {
    display: block;
    width: 68px;
    height: 68px;
    object-fit: contain;
  }
}
@media screen and (max-width: 780px) {
  .tk-art-swapped .tk-hero-mark { width: 64px; height: 56px; }
  .tk-art-swapped .tk-hero-mark > .ck-care-hen { width: 64px; }
  .tk-art-swapped #panel-daily .tk-checklist-rooster-mark > .tk-checklist-rooster {
    width: 56px;
    height: 56px;
  }
}