@property --color-linear-1 {
    syntax: '<color>';
    initial-value: #B99966;
    inherits: false;
}
@property --color-linear-2 {
    syntax: '<color>';
    initial-value: #E9D9B3;
    inherits: false;
}
@property --color-linear-3 {
    syntax: '<color>';
    initial-value: #F8EECB;
    inherits: false;
}
@property --color-linear-4 {
    syntax: '<color>';
    initial-value: #DBC59C;
    inherits: false;
}
@property --color-linear-5 {
    syntax: '<color>';
    initial-value: #A8895B;
    inherits: false;
}

.contact-content{
    padding: 80px 24px;
    max-width: 840px;
    margin: 0 auto;
    >h3{
        text-align: center;
        margin-bottom: 60px;
        &::after{
            content: "";
            display: block;
            margin: 14px auto 0;
            width: 60px;
            height: 4px;
            background-color: var(--color-primary-3);
        }
    }
    >h4{
        text-align: center;
        margin-bottom: 60px;
    }
    >div{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: fit-content;
        margin: 0 auto;
        >a{
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px 4px 24px;
            border-radius: 999px;
            >p{
                flex-grow: 1;
                text-align: center;
            }
            >svg{
                flex-shrink: 0;
            }
        }
    }
}

.contact-message-btn{
    background-color: color-mix(in oklab, #337FFF 100%, black);
    transition: background-color 0.3s;
    >p{
        color: white;
        line-height: 1;
    }
    >svg > .change-color{
        fill: color-mix(in oklab, #337FFF 100%, black);
        transition: fill 0.3s;
    }
    &:hover{
        background-color: color-mix(in oklab, #337FFF 75%, black);
        >svg > .change-color{
            fill: color-mix(in oklab, #337FFF 75%, black);
        }
    }
}

.contact-line-btn{
    background-color: color-mix(in oklab, #3ACE01 100%, black);
    transition: background-color 0.3s;
    >p{
        color: white;
        line-height: 1;
    }
    >svg > .change-color{
        fill: color-mix(in oklab, #3ACE01 100%, black);
        transition: fill 0.3s;
    }
    &:hover{
        background-color: color-mix(in oklab, #3ACE01 75%, black);
        >svg > .change-color{
            fill: color-mix(in oklab, #3ACE01 75%, black);
        }
    }
}

.contact-tel-btn{
    background: linear-gradient(135deg, var(--color-linear-1) 0%, var(--color-linear-2) 29.95%, var(--color-linear-3) 47.34%, var(--color-linear-4) 78.26%, var(--color-linear-5) 100%);
    transition: --color-linear-1 0.3s, --color-linear-2 0.3s, --color-linear-3 0.3s, --color-linear-4 0.3s, --color-linear-5 0.3s;
    >p{
        line-height: 1;
    }
    &:hover{
        --color-linear-1: #E9D9B3;
        --color-linear-2: #E9D9B3;
        --color-linear-3: #E9D9B3;
        --color-linear-4: #E9D9B3;
        --color-linear-5: #E9D9B3;
    }
}

.contact-wechat-btn{
    background-color: color-mix(in oklab, #51C332 100%, black);
    transition: background-color 0.3s;
    >p{
        color: white;
        line-height: 1;
    }
    &:hover{
        background-color: color-mix(in oklab, #51C332 75%, black);
    }
}

@media screen and (width < 768px) {
    .contact-content{
        >h3, >h4{
            margin-bottom: 40px;
        }
        >div{
            gap: 16px;
            >a>svg{
                width: 32px;
                height: 32px;
            }
        }
    }
}

@media screen and (width < 576px) {
    .contact-content{
        padding: 60px 24px;
        >div{
            grid-template-columns: repeat(2, 1fr);
        }
    }
}