#famiglia-racconto {
    --famiglia-panel: #291435;
    --famiglia-ink: #fff6fa;
    --famiglia-pink: #ff9ac8;
    --famiglia-orange: #ffba86;
    --famiglia-line: #694064;
    max-width: 960px;
    margin: 0 auto;
    color: var(--famiglia-ink);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}
#famiglia-racconto :where(section, div, figure, a, img) { box-sizing: border-box; }
#famiglia-racconto > section {
    margin: 0 0 20px;
    padding: clamp(19px, 4vw, 38px);
    border: 1px solid var(--famiglia-line);
    border-top: 4px solid var(--famiglia-pink);
    border-radius: 5px 26px 5px 26px;
    background: var(--famiglia-panel);
}
#famiglia-racconto > section:nth-of-type(even) { border-top-color: var(--famiglia-orange); }
#famiglia-racconto #famiglia-apertura {
    background: linear-gradient(130deg, #552249 0%, #341739 53%, #21122e 100%);
}
#famiglia-racconto h2, #famiglia-racconto h3 {
    color: var(--famiglia-ink);
    margin: 0 0 16px;
    line-height: 1.12;
    letter-spacing: -.04em;
    text-wrap: balance;
}
#famiglia-racconto h2 { font-size: clamp(31px, 6vw, 55px); font-weight: 800; }
#famiglia-racconto h3 { font-size: clamp(25px, 4.5vw, 36px); font-weight: 750; }
#famiglia-racconto p { margin: 0 0 16px; }
#famiglia-racconto p:last-child { margin-bottom: 0; }
#famiglia-racconto #famiglia-battuta {
    color: var(--famiglia-orange);
    max-width: 38ch;
    font-size: clamp(20px, 3.6vw, 28px);
    line-height: 1.35;
    font-weight: 750;
}
#famiglia-racconto section > div:has(> figure) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}
#famiglia-racconto section > div > :first-child { min-width: 0; }
#famiglia-racconto #famiglia-diretta > div { margin-bottom: 20px; }
#famiglia-racconto figure { margin: 0; min-width: 0; }
#famiglia-racconto figure a { display: block; }
#famiglia-racconto figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0;
    border: 1px solid var(--famiglia-line);
    border-radius: 4px 17px 4px 17px;
}
#famiglia-racconto #famiglia-finale figure { max-width: 420px; margin: 20px auto 0; }
#famiglia-racconto figcaption {
    color: var(--famiglia-orange);
    margin-top: 10px;
    font-size: .9em;
    text-align: center;
}
#famiglia-racconto #famiglia-servizi { margin: 22px 0 0; }
#famiglia-racconto #famiglia-servizi a {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 4px 15px 4px 15px;
    background: var(--famiglia-pink);
    color: #291435;
    font-weight: 750;
}
#famiglia-racconto a:focus-visible { outline: 3px solid var(--famiglia-orange); outline-offset: 3px; }