main.home {
    section.dash-grid {

        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        color: var(--light-text);

        @media (min-width: 750px) {
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
        }
    }

    article {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: fit-content;
        height: 30dvh;
        background-color: var(--accent-card);
        border-radius: var(--border-card);
        padding: 1rem;
        gap: .5rem;

        &.commerce {
            h2, em {
                font-size: var(--heading-smalmed);
            }

            div.shopify-summ {
                display: grid;
                grid-template-columns:auto 25% 1fr;
                align-items: center;
                width: 100%;
                height: fit-content;

                img {
                    width: auto;
                    height: 2rem;
                }

                p {
                    text-align: center;
                }

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: var(--always-light);
                    width: 80%;
                    height: auto;
                    justify-self: end;
                    background-color: var(--accent-orders);
                    padding: .5rem 1rem;
                    border-radius: var(--border-badge);
                }
            }

            div.mirakl-summ {
                display: grid;
                grid-template-columns:auto 25% 1fr;
                align-items: center;
                width: 100%;
                height: fit-content;

                img {
                    width: auto;
                    height: 2rem;
                }

                p {
                    text-align: center;
                }

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: var(--always-light);
                    width: 80%;
                    height: auto;
                    justify-self: end;
                    background-color: var(--accent-orders);
                    padding: .5rem 1rem;
                    border-radius: var(--border-badge);
                }
            }

            @media (min-width: 750px) {
                grid-column: span 2 / span 2;
                grid-row: span 2 / span 2;
            }


            h2 {
                color: inherit;
            }

            p {
                em {
                    font-size: var(--paragraph);
                }
            }

        }

        &.weather {
            @media (min-width: 750px) {
                grid-column: span 3 / span 3;
                grid-row: span 2 / span 2;
                grid-column-start: 3;
            }

        }

        &.spotify {
            @media (min-width: 750px) {
                grid-column: span 3 / span 3;
                grid-row: span 2 / span 2;
                grid-row-start: 3;
            }
        } 

        &.github {
            @media (min-width: 750px) {
                grid-column: span 2 / span 2;
                grid-row: span 2 / span 2;
                grid-column-start: 4;
                grid-row-start: 3;
            }
        }
    }
}