.community-locations {
    display: none;
}

@supports(display: grid) {
    .community-locations {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        grid-gap: 10px;
        width: 90%;
        padding: 16px;
        margin: 16px auto;
    }

    .community-quote {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .old-man {
        justify-self: center;
        align-self: center;
        box-shadow: 0 16px 8px -12px rgba(0,0,0,0.5);
    }

    .community-quote h2 {
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 16px;
        font-weight: 400;
        border-radius: 10px;
        margin: 0;
        padding: 24px;
        position: relative;
    }

    .community-quote h2::after {
        content: "";
        position: absolute;
        top: 35%; /* vertical position */
        left: -13px; /* horizontal position */
        border-width: 11px 13px 11px 0; /* the angle of the triangle */
        border-style: solid;
        border-color: transparent rgba(0,0,0,0.6);
    }

    .community-locations ul {
        display: grid;
        list-style: none;
        padding: 0;
        margin: 0;
        grid-template-columns: repeat(10,minmax(0,1fr));
        grid-template-rows: repeat(3, min-content);
        grid-gap: 8px;
        gap: 8px;
        grid-template: 
        "forums forums forums forums forums discord discord discord discord discord" 
        "youtube youtube youtube youtube youtube twitch twitch twitch twitch twitch"
        "facebook facebook twitter twitter instagram instagram tumblr tumblr patreon patreon";
    }

    @media screen and (min-width: 480px) {
        .community-quote {
            grid-template-columns: 1fr 3fr;
        }

        .community-quote h2 {
            font-size: 20px;
        }
    }


    @media screen and (min-width: 768px) {

        .community-quote {
            grid-template-columns: 1fr 2fr;
        }

        .old-man {
            justify-self: left;
        }

        .community-locations {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 10px;
            grid-gap: 10px;
        }

        .community-locations ul {
            grid-template-columns: repeat(7,minmax(0,1fr));
            grid-template-rows: 96px 96px;
            grid-template: 
            "forums forums youtube youtube facebook instagram patreon" "discord discord twitch twitch twitter tumblr ."
        }

        .community-quote h2 {
            font-size: 16px;
        }
    }

    @media screen and (min-width: 860px) {
        .community-quote h2 {
            font-size: 20px;
        }
    }

    @media screen and (min-width: 1000px) {
        .community-quote h2 {
            font-size: 24px;
        }
    }

    @media screen and (min-width: 1200px) {
        .community-quote {
            grid-template-columns: 1fr 3fr;
        }
    }

    .forums-icon { grid-area: forums; background: rgb(0, 78, 107);} 
    .discord-icon { grid-area: discord; background: rgb(44, 47, 51); } 
    .youtube-icon { grid-area: youtube; background: rgb(255, 0, 0); } 
    .twitch-icon { grid-area: twitch; background: rgb(100, 65, 164); } 
    .facebook-icon { grid-area: facebook; background: rgb(62, 103, 179); } 
    .twitter-icon { grid-area: twitter; background: rgb(29, 161, 242); } 
    .instagram-icon { grid-area: instagram; background: rgb(245, 0, 118); } 
    .tumblr-icon { grid-area: tumblr; background: rgb(41, 78, 110); } 
    .patreon-icon { grid-area: patreon; background: rgb(242, 103, 84); } 

    .community-locations svg {
        border-radius: 10px;
    }

    .community-locations li {
        border-radius: 10px;
    }

    .community-locations a {
        line-height: 0;
        border-radius: 10px;
    }
}