/* Client-supplied original PNGs. CSS viewports remove only the empty story canvas.
   No recolouring, raster edits or changes to the supplied files. */
.ymi-illustration {
    position: relative;
    display: block;
    flex: none;
    overflow: hidden;
    pointer-events: none;
}

.ymi-illustration > img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
}

.ymi-illustration--gramophone {
    width: clamp(68px, 7vw, 96px);
    aspect-ratio: 542 / 865;
}

.ymi-illustration--gramophone > img {
    width: 199.262%;
    left: -43.543%;
    top: -62.428%;
}

.ymi-illustration--lessons {
    width: clamp(86px, 8vw, 116px);
    aspect-ratio: 564 / 498;
}

.ymi-illustration--lessons > img {
    width: 191.49%;
    left: -42.553%;
    top: -142.972%;
}

.ymi-illustration--band {
    width: clamp(116px, 12vw, 156px);
    aspect-ratio: 1;
    border: 1px solid var(--ymi-line);
}

.ymi-illustration--band > img {
    position: static;
    width: 100%;
}

.ymi-release-heading {
    display: flex;
    gap: clamp(12px, 2vw, 28px);
    align-items: center;
    justify-content: space-between;
}

body.ymi-artist-theme #main-container .ymi-release-heading h2 {
    min-width: 0;
    margin: 0;
    font-size: clamp(2.7rem, 5.4vw, 5.2rem);
    overflow-wrap: normal;
}

.ymi-encounters-ledger .ymi-agenda-events > .ymi-illustrated-heading,
.ymi-encounters-ledger .ymi-agenda-lessons > .ymi-illustrated-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

@media (max-width: 700px) {
    .ymi-release-heading { gap: 12px; }
    .ymi-illustration--gramophone { width: 64px; }
    .ymi-illustration--band { width: 118px; }
    .ymi-illustration--lessons { width: 86px; }

    body.ymi-artist-theme #main-container .ymi-release-heading h2 {
        font-size: clamp(2rem, 9vw, 3.6rem);
    }
}

@media (max-width: 380px) {
    .ymi-illustration--gramophone { width: 52px; }
    .ymi-illustration--band { width: 100px; }
    .ymi-illustration--lessons { width: 72px; }
}