Slick slider issue

<div> inside Slick slide is not taking absolute positioning correctly

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<script src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script>
<div class="main">
    <div class="gallery-wrap">
        <div class="gallery-main-wrap">
            <div class="slick gallery-main gallery-50-2">
                <div class="post-slide">
                    <div class="post-slide-inner">
                        <img width="473" height="349" src="https://unsplash.it/473/349?image=631" />
                        <div class="gallery-credit"><i class="fa fa-camera"></i> Test credit</div>
                        <div class="gallery-pin">
                            <img src="https://unsplash.it/40/20/?image=631" />
                        </div>
                    </div>
                </div>
                <div class="post-slide">
                    <div class="post-slide-inner">
                        <img width="473" height="349" src="https://unsplash.it/473/349?image=615" />
                        <div class="gallery-pin">
                            <img src="https://unsplash.it/40/20/?image=615" />
                        </div>
                    </div>
                </div>
                <div class="post-slide">
                    <div class="post-slide-inner">
                        <img width="473" height="349" src="https://unsplash.it/473/349?image=607" />
                        <div class="gallery-pin">
                            <img src="https://unsplash.it/40/20/?image=607" />
                        </div>
                    </div>
                </div>
                <div class="post-slide">
                    <div class="post-slide-inner">
                        <img width="472" height="349" src="https://unsplash.it/472/349?image=603" />
                        <div class="gallery-pin">
                            <img src="https://unsplash.it/40/20/?image=603" />
                        </div>
                   ...

CSS

.main {
    width: 66.66666667%;
}
img {
    max-width: 100%;
    height: auto;
}
.gallery-main {
    border: 1px solid red;
}
.gallery-main .slick-slide {
    text-align: center;
}
.gallery-main .slick-slide img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.gallery-main .slick-track {
    position: static;
}
.gallery-main .gallery-credit {
    text-align: left;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}
.gallery-main .gallery-pin {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
}
.gallery-main .gallery-caption {
    margin: 20px 0;
}
.gallery-main .post-slide-inner {
    display: inline-block;
}
.gallery-nav-wrap {
    width: 80%;
    margin: 0 auto;
}
.gallery-nav .slick-slide img {
    padding: 10%;
}
.gallery-nav .slick-list {
    padding: 0 !important;
}

JavaScript

$('.gallery-main').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.gallery-nav',
            //          adaptiveHeight: true
        });
        $('.gallery-nav').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '.gallery-main',
            //          dots: true,
            centerMode: true,
            focusOnSelect: false,
            arrows: true
        });