Magnific pop up with title and caption next to image

Question

I'm using Magnific Pop Up for my portfolio website. I'd like to add a multi-line caption in addition to the title, including the location, year and type of service provided for each project, and even perhaps, a brief description. I tried adding text with breaks within the title attribute on HTML and it kinda works but it's obviously super dirty. I understand the solution is using JS but there's where I get stuck since it's not my forte. I hope somebody can help me, I would appreciate it.

So far this is what I have in HTML, with the LOCATION, YEAR, and SERVICE in one line, as per default functionality.

                <div class="project project-light">
                    <a href="img/projects/1-720x480.jpg" title="LOCATION: Location | YEAR: Year | SERVICE: Service">
                        <figure>
                            <img alt="" src="img/projects/1-480x720.jpg">
                            <figcaption>
                                <h3 class="project-title">
                                    Patio Design<br>2021
                                </h3>
                                <h4 class="project-category">
                                    Landscape
                                </h4>
                                <div class="project-zoom"></div>
                            </figcaption>
                        </figure>
                    </a>
                </div>

And this in JS:

options: {
    markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<figure>'+
                    '<div class="mfp-img"></div>'+
                    '<figcaption>'+
                        '<div class="mfp-bottom-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</figcaption>'+
                '</figure>'+
            '</div>',
    cursor: 'mfp-zoom-out-cur',
    titleSrc: 'title',
    verticalFit: true,
    tError: '<a href="%url%">The image</a> could not be loaded.'
},

This was my filthy attempt to break it using HTML only:

                        <a href="img/projects/1-720x480.jpg" title="<a>LOCATION</a><br>YEAR<br>SERVICES"
                            <figure>
                                <img alt="" src="img/projects/1-480x720.jpg">
                                <figcaption>
                                    <h3 class="project-title">
                                        Patio Design<br>2021
                                    </h3>
                                    <h4 class="project-category">
                                        Landscape
                                    </h4>
                                    <div class="project-zoom"></div>
                                </figcaption>
                            </figure>
                        </a>
                    </div>