#head {
    --gap: 1.4;
    padding: calc(var(--padding) * 2) var(--padding);
    display: flex;
    flex-direction: column;
    gap: calc(var(--padding) * var(--gap));
    background: linear-gradient(
        to bottom,
        /* rgb(226, 255, 248),  */
        var(--color900), 
        var(--bg)
    );
    .info {
        display: flex;
        flex-direction: column;
        gap: calc(var(--padding) * var(--gap));
        max-width: 350px;

        img {
            width: 100%;
            max-width: 300px;
        }
        h1 {
            margin: 0;
            font-size: 30px;
            font-weight: 500;
            font-family: 'Playfair Display';
        }
    }

    .pile {
        display: flex;
        padding: 3px;
        background: #fff;
        border: solid 1px rgba(0,0,0,.2);
        box-shadow: 
            /* inset rgba(0,0,0,.11) 3px 4px 10px 1px, */
            rgba(0,0,0,.15) 0px 0px 15px 0px
        ;
        font-family: 'Nunito';
        font-weight: bold;
        font-size: 18px;
        color: #000;
        border-radius: 99px;
        width: fit-content;
        align-items: center;
        justify-content: center;
        padding-right: 13px;
        font-size: 14px;

        .tp {
            display: flex;
            width: 70px;
            .t {
                min-width: 25px;
                height: 25px;
                background: var(--img);
                background-size: cover;
                border-radius: 99px;
                border: solid 3px #fff;
                transform: translateX(calc(-12px * calc(var(--p) - 1)));
            }
        }
    }
}


@media (min-width: 500px) {
    #head {
        align-items: center;
        .info {
            align-items: center;
            h1 {
                text-align: center;
            }
        }
    }
}