.grid-system {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    container-type: inline-size;
}

@container (min-width: 600px) {
    .grid-item {
        font-size: clamp(1rem, 1.5vw, 1.5rem);
    }
}

@media (max-width: 768px) {
    .grid-system {
        grid-template-columns: 1fr;
    }
}