ul.collections {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 418px);
    gap: 20px 20px;
    justify-content: center;
}

ul.collections li {
    position: relative;
    margin: 0;
    padding: 0;
}

ul.collections li a {
    display: block;
    overflow: hidden;
}

ul.collections li img {
    width: 100%;
    padding: 0;
    margin: 0;
}

ul.collections li a.name {
    float: left;
    margin: 12px 0 0 12px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
}

ul.collections li a.collection-magnify {
    float: right;
    clear: right;
    margin: 12px 12px 0 0;
    padding: 0;
    min-height: 18px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: #ababab;
}

ul.collections li a.collection-magnify i {
    margin-right: 7px;
}

ul.collections li a.collection-magnify:hover {
    color: #ed1c24;
}

a.icon-collection-favourite {
    position: absolute;
    top: 15px;
    right: 20px;
    display: block;
    width: 35px;
    height: 35px;
    background: url("../img/icon-favourite-circle.png") no-repeat 0 0;
}

a.icon-collection-favourite.active {
    background: url("../img/icon-favourite-circle-active.png") no-repeat 0 0;
}

/* only for X-LARGE */
@media all and (min-width: 1200px) and (max-width: 1399px) {
    ul.collections {
        grid-template-columns: repeat(3, 358px);
    }
}

/* only for LARGE */
@media all and (min-width: 992px) and (max-width: 1199px) {
    ul.collections {
        grid-template-columns: repeat(3, 298px);
    }

    ul.collections li a.name {
        margin: 12px 0 0 8px;
    }

    ul.collections li a.collection-magnify {
        margin: 12px 8px 0 0;
    }
}

/* for LARGE, X-LARGE, XX-LARGE */
@media all and (min-width: 992px) {
    ul.collections a img {
        transition: .25s;
    }

    ul.collections a img:hover {
        transform: scale(1.05);
    }
}

/* only for MEDIUM */
@media all and (min-width: 768px) and (max-width: 991px) {
    ul.collections {
        grid-template-columns: repeat(2, calc(50% - 10px));
        gap: 15px 15px;
    }

    ul.collections li a.name {
        margin: 12px 0 0 12px;
        font-size: 14px;
    }

    ul.collections li a.collection-magnify,
    ul.collections li a.collection-magnify:hover {
        margin: 12px 12px 0 0;
        padding: 0;
    }
}

/* only for SMALL */
@media all and (min-width: 576px) and (max-width: 767px) {
    ul.collections {
        grid-template-columns: repeat(2, calc(50% - 10px));
        gap: 15px 15px ;
    }

    ul.collections li a.name {
        margin: 12px 0 0 0;
        font-size: 14px;
    }

    ul.collections li a.collection-magnify,
    ul.collections li a.collection-magnify:hover {
        margin: 12px 0 0 0;
        font-size: 13px;
    }
}

/* up to X-SMALL */
@media all and (max-width: 575px) {
    ul.collections {
        grid-template-columns: repeat(1, 100%);
        gap: 15px 0;
    }

    ul.collections li a.name {
        margin: 12px 0 0 12px;
        font-size: 14px;
    }

    ul.collections li a.collection-magnify,
    ul.collections li a.collection-magnify:hover {
        margin: 12px 12px 0 0;
        font-size: 13px;
    }
}