/* ---------- Laptop ---------- */
@media (max-width: 1400px) {
    .about>.container {
        gap: var(--space-3);
    }

}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    .about {
        padding-block: var(--space-5);
    }

    .about>.container {
        grid-template-columns: 1fr;
        padding-inline: var(--space-3);
    }

    .about img {
        max-height: 420px;
        justify-self: center;
        margin-inline: auto;
    }

    .about h4 {
        text-align: center;
    }

    .about h2 {
        font-size: var(--fs-2xl);
        max-width: 25ch;
        margin-inline: auto;
    }

    .about p {
        margin-inline: auto;
        /* center the paragraph block itself, not just its text */
    }

}