Magnific-popup enqueue stylesheet not loading properly in wordpress

Question

I have implemented the magnific-popup and is nearly working, however the stylesheet is not loading properly.

When I click the image the javascript is working and has no errors in the console, but the magnific-popup stylesheet seems to be outputting like this in the inspector:

Does the output look normal in the image below?

my directory

Does my enqueue for the magnific-popup look fine?

function add_theme_scripts()
{
    wp_enqueue_style('raleway-font', 'https://fonts.googleapis.com/css?family=Raleway:200,200i,400,400i,600,600i');
    wp_enqueue_style('syne-font', 'https://fonts.googleapis.com/css2?family=Syne:wght@400;500');
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('magnific-popup-style', get_stylesheet_uri() . '/assets/css/magnific-popup.css', 'all');
    wp_enqueue_style('style', get_stylesheet_uri(), array(), false, 'all');

    wp_enqueue_script('jquery-3.5.1', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', array('jquery'), false, true); /*when uploaded to server, wordpress already has jquery*/
    wp_enqueue_script('magnific', get_template_directory_uri() . '/assets/js/magnific-popup/jquery.magnific-popup.min.js', 'jquery', false, true);
    wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', 'jquery', false, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

main.js

// magnific popup
jQuery('.gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 3], // Will preload 0 - before current, and 1 after the current image
        tPrev: 'Previous', // title for left button
        tNext: 'Next', // title for right button
    },
    removalDelay: 300,
    closeOnContentClick: true,
    midClick: true,
    mainClass: 'mfp-fade',
    callbacks: {
        buildControls: function () {
            // re-appends controls inside the main container
            this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
        }
    }
});

Answer 1

Try using get_stylesheet_directory_uri()

Documentation says "(string) URI to current theme's stylesheet directory."

https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/