.three-col {
    display: grid;
    grid-template-columns: 1fr;

    /* stacked by default */
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.three-col > * {
    min-width: 0;

    /* lets items shrink instead of overflowing */
}

@media (min-width: 768px) {
    .three-col {
        grid-template-columns: 2fr 1fr 2fr;
    }
}