/* gradient-btn.css */
@layer components {
    @property --btn-color-1 {
        syntax: '<color>';
        initial-value: #272727;
        inherits: false;
    }

    @property --btn-color-2 {
        syntax: '<color>';
        initial-value: #000000;
        inherits: false;
    }
    
    
    .colored-card{

        display:flex;
        flex-direction:column;
        padding:100px 40px 40px 40px;

        background: linear-gradient(180deg, var(--btn-color-1) 0%, var(--btn-color-2) 100%);
        transition: --btn-color-1 .3s, --btn-color-2 .3s;
    }
    .colored-card *{
        color:white;
    }
    .colored-card:hover{
        --btn-color-1:#000000;
    }
    .colored-card:hover .lm-text{
        text-decoration: underline;
    }
    .dark-blue-card{
        --btn-color-2: #0D0D54;
    }
    .dark-blue-card:hover{
        --btn-color-1:#0D0D54;
    }
    .light-blue-card{
        --btn-color-2: #14589B;
    }
    .light-blue-card:hover{
        --btn-color-1: #14589B;
    }
    .yellow-card{
        --btn-color-2:#705209;
    }
    .yellow-card:hover{
        --btn-color-1:#705209;
    }
    .grey-card{
        --btn-color-2:#626262;
    }
    .grey-card:hover{
        --btn-color-1:#626262;
    }
    .red-card{
        --btn-color-2:#6F1F00;
    }
    .red-card:hover{
        --btn-color-1:#6F1F00;
    }
}