/* Mobile devices */
@media (max-width: 640px) {
    .timer-square {
        width: 250px;
        height: 120px;
    }

    .intention-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .control-btn {
        padding: 0.5rem 1.25rem;
        width: auto;
    }

    #time-display {
        font-size: 3rem;
    }
}

/* Tablet devices */
@media (min-width: 641px) and (max-width: 1024px) {
    .timer-square {
        width: 280px;
        height: 140px;
    }

    .intention-btn {
        padding: 0.875rem 1.25rem;
    }
}

/* Larger screens */
@media (min-width: 1025px) {
    .timer-square {
        width: 320px;
        height: 160px;
    }
}