/* Optional helper for independently scaling the Time for the Hills motif assets.
   Example: <img class="tfth-motif" style="--tfth-motif-size: 8rem" src="assets/art/time-for-the-hills-motifs/moon.svg" alt=""> */
.tfth-motif {
  display: block;
  width: var(--tfth-motif-size, 6rem);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tfth-motif--inline {
  display: inline-block;
  vertical-align: middle;
}

.tfth-motif--star { aspect-ratio: 1; background-image: url("art/time-for-the-hills-motifs/star.svg"); }
.tfth-motif--stars-field { aspect-ratio: 2 / 1; background-image: url("art/time-for-the-hills-motifs/stars-field.svg"); }
.tfth-motif--cloud-gray { aspect-ratio: 12 / 5; background-image: url("art/time-for-the-hills-motifs/cloud-gray.svg"); }
.tfth-motif--cloud-lavender { aspect-ratio: 36 / 17; background-image: url("art/time-for-the-hills-motifs/cloud-lavender.svg"); }
.tfth-motif--lightning { aspect-ratio: 1 / 2; background-image: url("art/time-for-the-hills-motifs/lightning.svg"); }
.tfth-motif--sun { aspect-ratio: 10 / 7; background-image: url("art/time-for-the-hills-motifs/sun.svg"); }
.tfth-motif--moon { aspect-ratio: 1; background-image: url("art/time-for-the-hills-motifs/moon.svg"); }
.tfth-motif--tree { aspect-ratio: 15 / 26; background-image: url("art/time-for-the-hills-motifs/tree.svg"); }
.tfth-motif--title { aspect-ratio: 52 / 11; background-image: url("art/time-for-the-hills-motifs/title.svg"); }
.tfth-motif--monkey { aspect-ratio: 337 / 264; background-image: url("art/time-for-the-hills-monkey.webp"); }