.iconlist {
    background-color: var(--light-gray);
    background-image: url(/theme/public/assets/frontend/img/transparenter-hintergrund.webp);
    background-size: cover;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    .iconlist__intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 700px;
        margin: inherit;
    }
    .iconlist__icons {
        margin-top: var(--spacing-12);
        ul {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: var(--gutter);
            li {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: 100px auto;
                align-items: center;
                justify-content: center;
                figure {
                    height: 100px;
                    width: 100px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: flex-start;
                    justify-self: center;
                    svg,
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        max-width: 60px;
                        max-height: 60px;
                        path {
                            transition: ease all 0.3s;
                        }
                    }
                    a:hover {
                        svg {
                            path.lighten {
                                fill: var(--main-color, #8bd6e6);
                            }
                        }
                    }
                }
                .icon__description {
                    align-self: flex-start;
                    text-transform: uppercase;
                    hyphens: auto;
                    hyphenate-limit-chars: auto 3;
                    hyphenate-limit-lines: 4;
                    text-align: center;
                }
            }
        }
    }
}

@media (min-width: 768px) {
    .iconlist {
        .iconlist__icons {
            ul {
                grid-template-columns: repeat(5,1fr);
                gap: var(--spacing-14);
            }
        }
    }
}