#contact {
    position: relative;
}
@media screen and (min-width: 1024px) {
    #contact {
        display: none;
    }
}
@media screen and (max-width: 1024px) {
    #contact {
        margin-top: 5em;
    }
    #contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2em;
    }
    #contact {
        box-sizing: border-box;
        padding: 5em 20px;
    }
    #contact {
        background-color: #111;
        border-top: 10em solid var(--color__1);
    }
    #contact .head {
        box-sizing: border-box;
        padding: 20px 30px;
    }
    #contact .head {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    #contact .head h4,
    #contact .head p {
        text-align: center;
        color: #fff;
    }
    #contact .head h4 {
        font-family: 'aesthetic-font';
        font-size: 40px;
        font-weight: 400;
    }
    #contact .head p {
        font-family: 'content-font';
        font-size: 16px;
        line-height: 24px;
    }
}