.button__primary {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-light);
    text-decoration: none;
    font-family: var(--font-primary), sans-serif;
    font-size: 1.25rem;
    border-radius: 0.5rem;
    border: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.button__primary:hover {
    background: var(--color-primary-dark);
}

.button__secondary {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-light);
    text-decoration: none;
    font-family: var(--font-primary), sans-serif;
    font-size: 1.25rem;
    border-radius: 0.5rem;
    border: 2px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.button__secondary:hover {
    background: var(--color-primary-dark);
    color: var(--color-light);
    border: 2px solid var(--color-primary-dark);
}

@media (max-width: 768px) {
    .button__primary {
        font-size: 1.1rem;
        padding: 0.5rem 0.75rem;
    }

    .button__secondary {
        font-size: 1.1rem;
        padding: 0.5rem 0.75rem;
    }
}