.content-gallery ul {
    --gap-value: 1rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-gap: var(--gap-value);
    grid-template-columns: 1fr;
    place-content: center;
}

.content-gallery ul li {
    margin: 0;
}

/* Tablet Breakpoint: 768px */
@media screen and (min-width: 768px) {
    .content-gallery ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-gallery.content-gallery--cols-2 ul {
        grid-template-columns: 1fr 1fr;
    }

    .content-gallery.content-gallery--cols-3 ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-gallery.content-gallery--cols-4 ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .content-gallery.content-gallery--cols-5 ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-gallery.content-gallery--cols-6 ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-gallery.content-gallery--cols-7 ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .content-gallery.content-gallery--cols-8 ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .content-gallery.content-gallery--cols-9 ul {
        grid-template-columns: repeat(5, 1fr);
    }

    .content-gallery.content-gallery--cols-10 ul {
        grid-template-columns: repeat(5, 1fr);
    }

    .content-gallery.content-gallery--cols-11 ul {
        grid-template-columns: repeat(6, 1fr);
    }

    .content-gallery.content-gallery--cols-12 ul {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Large Breakpoint: 990px */
@media screen and (min-width: 990px) {
    .content-gallery ul {
        --gap-value: calc(var(--gap-default) * 2);
    }
}

/* Extra Large Breakpoint: 1200px */
@media screen and (min-width: 1200px) {
    .content-gallery ul {
        --gap-value: calc(var(--gap-default) * 3);
    }

    .content-gallery.content-gallery--cols-5 ul {
        grid-template-columns: repeat(5, 1fr);
    }

    .content-gallery.content-gallery--cols-6 ul {
        grid-template-columns: repeat(6, 1fr);
    }

    .content-gallery.content-gallery--cols-7 ul {
        grid-template-columns: repeat(7, 1fr);
    }

    .content-gallery.content-gallery--cols-8 ul {
        grid-template-columns: repeat(8, 1fr);
    }

    .content-gallery.content-gallery--cols-9 ul {
        grid-template-columns: repeat(9, 1fr);
    }

    .content-gallery.content-gallery--cols-10 ul {
        grid-template-columns: repeat(10, 1fr);
    }

    .content-gallery.content-gallery--cols-11 ul {
        grid-template-columns: repeat(11, 1fr);
    }

    .content-gallery.content-gallery--cols-12 ul {
        grid-template-columns: repeat(12, 1fr);
    }
}