/* ========================= */
/* ALIGN GROUP               */
/* ========================= */

.align-group {
    display: flex;
    gap: 6px;
}

.align-btn {
    padding: 6px 8px;

    font-size: 0.9rem;

    border-radius: 8px;

    border: 1px solid rgba(0,0,0,0.15);

    background: rgba(255,255,255,0.9);

    cursor: pointer;

    transition: 0.15s ease;
}

.align-btn:hover {
    background: rgba(0,191,255,0.15);
}

.align-btn.active {
    background: #0055A4;
    color: white;
}

/* ======================================================== */
/* RESPONSIVE                                                */
/* ======================================================== */

@media (max-width: 768px) {

    .align-group {
        flex-wrap: wrap;
    }

    .align-btn {
        padding: 6px 7px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {

    .align-btn {
        font-size: 0.75rem;
        padding: 5px 6px;
    }
}