:root {
    --donut-chart-max-width: 600px;
    --donut-chart-graph-size-sm: 140px;
    --donut-chart-graph-size-lg: 210px;
}
.donut-chart {
    container-name: donut-chart;
    container-type: inline-size;
    width: 100%;
}
.donut-chart__grid {
    column-gap: var(--spacing-400);
    display: grid;
    grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-sm), 1fr);
    grid-template-rows: auto 1fr auto;
    max-width: var(--donut-chart-max-width);
    row-gap: var(--spacing-200);
    width: 100%;
}
.donut-chart__title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-600);
}
.donut-chart__graph {
    align-self: flex-end;
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: var(--donut-chart-graph-size-sm);
    position: relative;
    width: 100%;
}
.donut-chart__metric-value {
    font-size: var(--font-size-giant-1);
    font-weight: var(--font-weight-600);
}
.donut-chart__metric-label {
    font-size: var(--font-size-regular);
}
.donut-chart__legend {
    align-self: flex-end;
    grid-column: 1 / -1;
}
@container (width > 450px) {
    .donut-chart__grid {
        column-gap: var(--spacing-800);
        grid-template-columns: 1fr minmax(var(--donut-chart-graph-size-lg), 1fr);
        row-gap: var(--spacing-250);
    }
    .donut-chart__legend {
        grid-column: 1;
        grid-row-end: -1;
    }
    .donut-chart__graph {
        min-height: var(--donut-chart-graph-size-lg);
    }
    .donut-chart__legend-container {
        margin-top: var(--spacing-100);
    }
}
@supports not (container-type: inline-size) {
    @media (min-width: 1024px) {
        .donut-chart__grid {
            column-gap: var(--spacing-800);
            grid-template-columns: 1fr minmax(
                    var(--donut-chart-graph-size-lg),
                    1fr
                );
            row-gap: var(--spacing-250);
        }
        .donut-chart__legend {
            grid-column: 1;
            grid-row-end: -1;
        }
        .donut-chart__graph {
            min-height: var(--donut-chart-graph-size-lg);
        }
        .donut-chart__legend-container {
            margin-top: var(--spacing-100);
        }
    }
}