Moving carousel item to a new component produces weird space - css

Question

I'm using vue-slick-carousel in my app. I have the following code:
<template>
<div id="app">
<div class="banner-container">
<div>
<VueSlickCarousel v-bind="settings">
<div v-for="item in items" :key="item.id">
<!-- ALTERNATIVE 1 (WORKS) -->
<div>
<a href="abc" target="_blank">
<img id="picture1" src="./assets/carouse-item.png" />
<div class="position-relative">
<div class="banner-description">
<span class="banner-title">
<a v-bind:href="'#'" class="header-anchor">#</a>
TITLE<br />
</span>
<span class="banner-alternative-text">
<a v-bind:href="'#'" class="header-anchor">#</a>
DESCRIPTION<br />
</span>
</div>
</div>
</a>
</div>
<!-- ALTERNATIVE 2 (DOESN'T WORK) -->
<!-- <Child :item="item"/> -->
</div>
</VueSlickCarousel>
</div>
</div>
</div>
</template>
There are 2 alternatives. Alternative 1 works fine:
Alternative 2 is basically the code under Alternative 2 extracted into a new component - Child. It produces this output:
I can't understand why just extracting the part of code into a new component changes the layout like that.
The source code of the app is available at https://github.com/marcinjahn/vue-carousel-issue.