.button-con {
    min-width: 100%; 
}

button {
    border: var(--action-color) 5px solid; 
    text-align: center;
    padding: 1rem 1.618rem;  
    font-family: var(--font); 
    font-weight: 700;
    color: var(--sec-color); 
    border-radius: var(--border-radius);
    width: 100%; 
    background-color: var(--action-color);
    font-size: var(--medium);
    cursor: pointer;
}

button:hover {
    -webkit-animation-name: btn-change;
    animation-name: btn-change;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    color: var(--action-color);
}

button:hover span {
    color: var(--action-color);
}

@media (min-width: 768px) {
    button {
        font-size: var(--medium);
        padding: 1.618rem 2.617924rem; 
    }
}

@media (min-width: 1024px) {
    button {
        font-size: var(--large);
    }
    .button-con {
        min-width: 50%; 
    }
}

/*  --xsmall: 0.61804697157rem;
    --small: 1rem;
    --medium: 1.618rem;
    --large: 2.617924rem;

*/