Por que os links nos cartões dentro deste carrossel do Flickity não estão funcionando?

Tenho um carrossel do Flickity no meu site, preenchido por um bloco PHP. Tudo renderiza corretamente, mas não consigo entender por que os links não estão funcionando. Você pode ver uma demonstração ao vivo aqui: https://sc.apexl.io/swimming-lessons/adult-and-child-swimming-lessons/ (role para baixo até a seção "De criança a titã..."). Suspeito que tenha algo a ver com a capacidade de clicar/arrastar dos cartões. Agradeço desde já!

HTML:

    <div class="container card-carousel-header"<?php if (get_field('remove_top_margin')): ?> style="margin-top:0;"<?php endif; ?>>
        <div class="row">
            <h2 class="animated-underline-effect">
                <span class="animated-underline"><?php the_field('heading'); ?></span>
            </h2>
        </div>
    </div>
<?php endif; ?>

<?php
$start_index = get_field('default_slide');
$start_index = is_numeric($start_index) ? intval($start_index) : 1;
$start_index = $start_index - 1;
?>

<div class="carousel-course-card" data-flickity='{ "freescroll": false, "pageDots": false, "wrapAround": false, "initialIndex": <?php echo $start_index; ?> }'<?php if (get_field('remove_bottom_margin')): ?> style="margin-bottom:0;"<?php endif; ?>>

    <?php $counter = 0; // Initialize a counter for unique IDs ?>
    <?php while (have_rows('carousel_repeater')): the_row(); ?>

        <div class="carousel-course-card-cell">
            <div class="card-cell-content">
                <div class="card-cell-text">
                    <h3>
                        <?php the_sub_field('name'); ?>
                    </h3>
                    <p class="card-subtitle">
                        <?php the_sub_field('subtitle'); ?>
                    </p>
                </div>
            </div>
            <div class="card-cell-thumbnail">
                <img src="<?php the_sub_field('image'); ?>" alt=""/>
            </div>
            <div class="card-cell-button" id="button-<?php echo $counter; ?>">
                <?php
                $cta = get_sub_field('call_to_action');
                ?>
                <?php if ($cta == 'book'): ?>
                    <a href="https://mightysplash-bookings.swimphony.io/" target="_blank">Click here to book your lesson</a>
                <?php elseif ($cta == 'learn'): ?>
                    <a href="<?php the_sub_field('card_link'); ?>">Click here to learn more</a>
                <?php endif; ?>
            </div>
        </div>
        <?php $counter++; // Increment the counter ?>
    <?php endwhile; ?>
</div>

CSS:

    margin-top: 6rem;
    margin-bottom: -6rem;
    text-align: center;
    color: @msorange;
}

.carousel-course-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, white 0%, white 30%, #e17122 30%, #e17122 70%, white 70%, white 100%);
    background-repeat: repeat-x;
    transform: skewY(1deg);
    transform-origin: bottom;
    will-change: transform;
    z-index: -1;
}

.carousel-course-card {
    padding: 3rem 0;
    margin: 2rem auto;
    position: relative;
    background-image: url('/wp-content/uploads/mighty-splash/ms-orange-dots-down.svg');
    background-repeat: repeat-x;
    background-position: 0 90%;
    background-size: 100%;

    .carousel-course-card-cell {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 450px;
        height: 500px;
        margin: 50px 20px 50px 20px;
        background: #fff;
        border-radius: 2px;
        text-align: center;
        counter-increment: carousel-cell;
        opacity: 0.5;
        transition: box-shadow 0.8s, opacity 0.5s;
    }

    .carousel-course-card-cell.is-selected {
        box-shadow: 5px 5px 5px rgba(0,0,0,.2), 10px 10px 30px rgba(0,0,0,.3);
        opacity: 1;
    }
    
    .carousel-course-card-cell {
        .card-cell-content {
            width: 100%;
            padding: 20px;
            align-content: center;
            
            .card-cell-text {
                width: 90%;
                margin: 0 auto;
                
                h3 {
                    margin: 0 auto;
                    color: @msdarkblue;
                }
                
                p.card-subtitle {
                    font-family: Action-Man;
                    margin: 0 auto;
                    color: @mspink;
                }
            }
        }
        
        .card-cell-info-container {
            width: 100%;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            
            .card-cell-info {
                margin-bottom: 30px;
                display: flex;
                flex-direction: row;
                text-align: left;
                
                h4 {
                    margin: 0;
                    font-size: 16px;
                    font-weight: 500;
                }
                
                i {
                    font-size: 25px;
                    margin-right: 20px;
                    color: #ff4e00
                }
            }
            
            .card-cell-info:last-of-type {
                margin: 0;
            }
        }
        
        .card-cell-thumbnail {
            width: 100%;
            height: auto;
            padding: 1px;
            
            img {
                width: 100%;
                max-height: auto;
                padding: 0;
                margin: 0;
            }
        }

        .card-cell-button {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            
            a {
                font-family: Action-Man;
                text-decoration: none;
                color: @msdarkblue;
            }
        }
    }
}

.flickity-prev-next-button.next {
    right: 25vw !important;
}

.flickity-prev-next-button.previous {
    left: 25vw !important
}

.flickity-button {
    transition: filter 0.5s;
}

.flickity-button, .flickity-button:hover {
    background: #ddd !important;
    color: #fff !important;
}

.flickity-button:hover .flickity-button-icon {
    fill: white !important;
}

.flickity-button:hover {
    filter: drop-shadow(0px 0px 30px rgba(255,78,0,0.5));
}

@media only screen and (max-width: @mediaBreakMedium) {
    .flickity-prev-next-button.next {
        right: 5vw !important;
    }
    .flickity-prev-next-button.previous {
        left: 5vw !important;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.75);

    .modal-content {
        background-color: #fefefe;
        padding: 20px;
        border: 1px solid #888;
        width: 80% !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 75vh;
        overflow: scroll;

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close-button:hover, .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    }
}