@layer components {
    .metric-grid {
            align-items: stretch;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 0;
            padding: 0;
            text-align: center;
            width: 100%;
        }

    @media (min-width: 48rem) {
        .metric-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }
    }

    @media (min-width: 48rem) {
        .metric-grid--three {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }
    }

    @media (min-width: 48rem) {
        .metric-grid--three .metric-tile {
                    border-left: 0;
                    border-top: 0;
                }
    }

    @media (min-width: 48rem) {
        .metric-grid--three .metric-tile:nth-child(3n + 1):not(:first-child) {
                    border-left: 0;
                }
    }

    @media (min-width: 48rem) {
        .metric-grid--three .metric-tile:nth-child(3n + 2),
                .metric-grid--three .metric-tile:nth-child(3n + 3) {
                    border-left: 1px solid var(--dashboard-color-border);
                }
    }

    @media (min-width: 48rem) {
        .metric-grid--three .metric-tile:nth-child(n + 4) {
                    border-top: 1px solid var(--dashboard-color-border);
                }
    }
}