#hero {
    text-align: center;
    width: clamp(280px, 60%, 500px);
}

h1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;

    color: var(--heading-text);
    font-weight: 400;
    font-family: "Yeseva One", Georgia, serif;
    font-size: 2.2rem;
    line-height: 1.25;
}

h1 span {
    text-align: center;
    align-self: center;
}

h1 .name {
    font-size: 2.8rem;

    background: linear-gradient(
        to right,
        var(--color-secondary),
        var(--color-primary-dark),
        var(--color-tertiary)
    );

    /* clip to text only */
    -webkit-background-clip: text;
    background-clip: text;
    /* transparent text color to show background*/
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#hero > * {
    margin-bottom: 1rem;
}

#hero p {
    margin-bottom: 0.2rem;
}

#hero img {
    width: clamp(120px, 35%, 200px);
    border-radius: 100%;

    box-shadow: 0px 4px 23px 1px var(--shadow-color);
    -webkit-box-shadow: 0px 4px 23px 1px var(--shadow-color);
    -moz-box-shadow: 0px 4px 23px 1px var(--shadow-color);
}

#hero .pills {
    font-weight: 600;
    margin-bottom: 1rem;
}

/* medium */
@media only screen and (min-width: 768px) {
    h1 {
        display: block;
        /* text-align: center; */
    }
}