<template>
    <div class="Medialist">
        <h1>Medien</h1>
        <div class="medialist_container">
            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media file">
                <div class="media_inner">
                    <div class="text">Das-Dokument.pdf</div>
                    <i class="icon icon-document-text"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media file">
                <div class="media_inner">
                    <div class="text">Das-Dokument.pdf</div>
                    <i class="icon icon-document-text"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media file">
                <div class="media_inner">
                    <div class="text">Das-Dokument.pdf</div>
                    <i class="icon icon-document-text"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media file">
                <div class="media_inner">
                    <div class="text">Das-Dokument.pdf</div>
                    <i class="icon icon-document-text"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media audio">
                <div class="media_inner">
                    <div class="text">Audiofile.mp3</div>
                    <i class="icon icon-stats-bars"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media video">
                <div class="media_inner">
                    <div class="text">Videofile.avi</div>
                    <i class="icon icon-videocamera"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media video">
                <div class="media_inner">
                    <div class="text">Videofile.avi</div>
                    <i class="icon icon-videocamera"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media audio">
                <div class="media_inner">
                    <div class="text">Audiofile.mp3</div>
                    <i class="icon icon-stats-bars"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media file">
                <div class="media_inner">
                    <div class="text">Dokument.pdf</div>
                    <i class="icon icon-videocamera"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media file">
                <div class="media_inner">
                    <div class="text">Dokument.pdf</div>
                    <i class="icon icon-document-text"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media image">
                <div class="media_inner">
                    <img src="assets/images/placeholder_image.jpg" alt="">
                    <i class="icon icon-images"></i>
                    <a href="#overlay"></a>
                </div>
            </div>

            <!-- Media-File -->
            <div class="media video">
                <div class="media_inner">
                    <div class="text">Videofile.avi</div>
                    <i class="icon icon-videocamera"></i>
                    <a href="#overlay"></a>
                </div>
            </div>


            <div style="clear:both;"></div>
                


        </div>
    </div>
</template>

<style lang="less">
    @import "~mixins";
    .medialist_container {margin:-6px;}
    .media {display:block; position:relative; width:10%; height:auto; line-height:0; float:left; padding:3px;}
    .media_inner {transition:all ease 0.2s; border:solid 5px transparent; width:100%; height:0; padding-bottom:100%; position:relative;}
    .media_inner a {position:absolute; top:0px; bottom:0px; left:0px; right:0px;}
    .media:hover .media_inner {border:solid 5px #28b78d;}

    .media img {
        position:absolute;
        height:100%;
        width:100%;
        object-fit: cover;
    }
    .media i {
        display:block;
        position:absolute;
        left:0px;
        bottom:0px;
        width:30px;
        height:30px;
        background:#28b78d;
        color:#FFF;
        text-align:center;
        font-size:20px;
        padding-top:5px;
    }
    .file i {background:#2868b7;}
    .video i {background:#ac1a0b;}
    .audio i {background:#c95c14;}

    .media .text {
        position:absolute;
        top:0px; bottom:0px; left:0px; right:0px;
        background:#CCC;
        color:#FFF;
        font-weight:600;
        padding:20px;
        display:flex;
        align-items: center;
        justify-content: center;
        text-align:center;
        line-height:1.2;
    }
    .media .text i {
        line-height:1;
    }
    .file .text {background:#2868b7;}
    .video .text {background:#ac1a0b;}
    .audio .text {background:#c95c14;}
    /*.media .text i {
        position:relative;
        top:inherit; bottom:inherit; left:inherit; right:inherit;
        display:block;
        text-align:center;
        margin:0 auto 5px auto;
        background:none;
        font-size:30px;
        height:35px;
        line-height:1;
    }
    .media .text i:before {
        margin-left:0px!important;
    }*/

    @media(max-width:1600px) {
        .media {width:20%;}
    }
    @media(max-width:1000px) {
        .media {width:33.33333%;}
    }
    @media(max-width:600px) {
        .media {width:50%;}
    }
</style>

<script>
// import ScrollTable from 'components/scroll-table.vue';

export default {
    name: "Medialist"
}
</script>
