Splide Align

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.3/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.3/css/splide.min.css">
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/splide.min.css">

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        .splide {
            height: 100%;
        }

        .splide__track {
            height: 100%;
        }

        .splide__slide {
            height: 100%;
            padding: 5px;
        }

        .image {
            display: flex;
            height: 60%;
        }

        .image > img {
            align-self: end;
            max-height: 100%;
            max-width: 100%;
        }

        .text {
            height: 40%;
        }
    </style>
</head>
<body>
    <div class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <div class="image">
                        <img src="https://dummyimage.com/1400x600/ff4400/fff.png&text=1" />
                    </div>
                    <div class="text">
                        <h2>Sed a pellentesque velit</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis aliquam velit. Mauris viverra blandit est a pharetra. Pellentesque quis ligula non sapien luctus vestibulum.</p>
                    </div>
                </li>
                <li class="splide__slide">
                    <div class="image">
                        <img src="https://dummyimage.com/600x600/ff4400/fff.png&text=2" />
                    </div>
                    <div class="text">
                        <h2>Consectetur adipiscing elit</h2>
                        <p>Integer eu ipsum tortor.</p>
                    </div>
                </li>
                <li class="splide__slide">
                    <div...