.container-narrow {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 900px;
}

.container-wide {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1600px;
}

.page-hero .container,
.hero .container {
    max-width: 900px;
}

.section-description {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-description,
.indicator-description,
.purpose-card p {
    max-width: 65ch;
}

@media (min-width: 1400px) {

    .container-wide {
        max-width: 1600px;
        padding: 0 48px;
    }

}

@media (max-width: 1399px) {

    .container-wide {
        max-width: 1400px;
        padding: 0 40px;
    }

}

@media (max-width: 767px) {

    .container,
    .container-narrow,
    .container-wide,
    .page-hero .container,
    .hero .container {
        padding: 0 15px;
    }
    
}

@media (max-width: 479px) {

    .container,
    .container-narrow,
    .container-wide,
    .page-hero .container,
    .hero .container {
        padding: 0 15px;
    }

}

.purpose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

@media (max-width: 1023px) {

    .purpose-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    
}

@media (max-width: 767px) {

    .purpose-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
}

.indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 32px;
}

@media (max-width: 1023px) {

    .indicators-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
    }
    
}

@media (max-width: 767px) {

    .indicators-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
}

@media (max-width: 767px) {

    section {
        padding: 30px 0;
    }

}

.text-center {
    text-align: center;
}

.max-w-narrow {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-medium {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-wide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}