html+css как обрезать/скрыть div

Создал div в который вставлял картинки и накладывал на друг друга и получилось низу много свободного места из за них,как обрезать див

вот как выглядело это изначально

вот код css

    .img-responsive{ 
    position: relative;
}
.img-responsive-yt{
    position: relative;
    transform: scale(0.35);
    top:-24%;
    left: 18%;
    transition:transform .4s;
}
.img-responsive-vk{
    position: relative;
    transform: scale(0.35);
    top:-44%;
    left: -18%;
    transition:transform .4s;
}
.img-responsive-tg{
    position: relative;
    transform: scale(0.35);
    top:-56%;
    left: -18%;
    transition:transform .4s;
}
.img-responsive-ds{
    position: relative;
    transform: scale(0.35);
    top:-76.2%;
    left: 18%;
    transition:transform .4s;
}
.img-responsive-ds:hover, .img-responsive-vk:hover, .img-responsive-yt:hover, .img-responsive-tg:hover{
    transform: scale(0.38);
}

вот код html

        <section class="cosimage row">
            <div class="col-3"></div>
            <div class="col-6">
                <img  class="img-responsive" style='width:100%;' src="{% static 'main/img/ramka.png' %}">
                <a href="https://www.youtube.com/">
                    <img class="img-responsive-yt" style='width:100%;' src="{% static 'main/img/youtube.png' %}">
                </a>
                <a href="https://vk.com/konopiya">
                    <img  class="img-responsive-vk" style='width:100%;' src="{% static 'main/img/vk.png' %}">
                </a>
                <a href="https://t.me/Bytovskiy">
                    <img  class="img-responsive-tg" style='width:100%;' src="{% static 'main/img/tg.png' %}">
                </a>
                <a href="https://web.telegram.org/k/">
                    <img  class="img-responsive-ds" style='width:100%;' src="{% static 'main/img/ds.png' %}">
                </a>
            </div>
            <div class="col-3"></div>
        </section>