Two lines of text on portfolio page thumbnails

Site URL: https://www.sandrarsobral.com/

Hello!

How do I make the text 2 lines on thumbnails for portfolio pages? Also making the second line text smaller.

Thank you

Add to Design > Custom CSS

a.grid-item h3:after {
    display: block;
    font-size: 12px;
}
a.grid-item[href="/work/amazfitsocial"] h3:after {
    content: "social media";
}
a.grid-item[href="/work/welcomepickups"] h3:after {
    content: "marketing";
}
a.grid-item[href="/work/twistandshout"] h3:after {
    content: "branding";
}
a.grid-item[href="/work/rockclassics"] h3:after {
    content: "motion graphics";
}
a.grid-item[href="/work/toshibasocial"] h3:after {
    content: "social media";
}
a.grid-item[href="/work/comfeesocial"] h3:after {
    content: "social media";
}
a.grid-item[href="/work/socialvol1"] h3:after {
    content: "vol1";
}
a.grid-item[href="/work/stranger-things-intro"] h3:after {
    content: "motion graphics";
}
a.grid-item[href="/work/posters"] h3:after {
    content: "poster";
}
a.grid-item[href="/work/evelyn"] h3:after {
    content: "product";
}

21 hours ago, tuanphan said:

Add to Design > Custom CSS

a.grid-item h3:after {
    display: block;
    font-size: 12px;
}
a.grid-item[href="/work/amazfitsocial"] h3:after {
    content: "social media";
}
a.grid-item[href="/work/welcomepickups"] h3:after {
    content: "marketing";
}
a.grid-item[href="/work/twistandshout"] h3:after {
    content: "branding";
}
a.grid-item[href="/work/rockclassics"] h3:after {
    content: "motion graphics";
}
a.grid-item[href="/work/toshibasocial"] h3:after {
    content: "social media";
}
a.grid-item[href="/work/comfeesocial"] h3:after {
    content: "social media";
}
a.grid-item[href="/work/socialvol1"] h3:after {
    content: "vol1";
}
a.grid-item[href="/work/stranger-things-intro"] h3:after {
    content: "motion graphics";
}
a.grid-item[href="/work/posters"] h3:after {
    content: "poster";
}
a.grid-item[href="/work/evelyn"] h3:after {
    content: "product";
}

 

Perfect! Thank you