@media (max-width: 1025px) {
    :root {
        --contact-grid-columns: 1;
        --contact-form-columns: 1;
        --contact-form-span: 1;
        --contact-form-row: 2;
        --contact-info-row: 3;
    }
}
@media (min-width: 1025px) {
    :root {
        --contact-grid-columns: 3;
        --contact-form-columns: 2;
        --contact-form-span: 2;
        --contact-form-row: 2;
        --contact-info-row: 2;
    }
}

#dg-contact {
    display: grid;
    grid-template-columns: repeat(
        var(--contact-grid-columns, 3),
        1fr
    );
    border-width: 0;
}
#dg-contact > .contact-header {
    grid-column: span var(--contact-grid-columns, 3);
    width: 100%;
    text-align: center;
}
#dg-contact > .contact-info {
    margin: 0 3em;
    font-size: 0.8em;
    grid-row: var(--contact-info-row, 2);
}
#dg-contact > .contact-info .info-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    margin: 1em 0.5em;
}
#dg-contact > .contact-info .info-card > img {
    grid-row: span 2;
}
#dg-contact > .contact-info .info-card > h4.subtitle {
    padding: 0 0 1em 1.5em;
    margin: 0;
}
#dg-contact > .contact-info .info-card > .message {
    padding: 0 0 0.5em 1.5em;
    margin: 0;
}
#dg-contact > .contact-form {
    grid-column: span var(--contact-form-span, 2);
    grid-row: var(--contact-form-row, 2);
    height: 100%;
    width: 100%;
    margin: 0;
    border-width: 0.15em;
    padding: 0 1.5em 1.5em 1.5em;
    font-size: 0.75em;
}
#dg-contact > .contact-form form {
    display: grid;
    grid-template-columns: repeat(var(--contact-form-columns, 2), 1fr);
    grid-template-rows: auto;
    height: 100%;
    width: 100%;
}
#dg-contact > .contact-form form #details {
    grid-column: span var(--contact-form-columns, 2);
}
#dg-contact > .contact-form form span:has(#submit) {
    grid-column: span var(--contact-form-columns, 2);
    justify-items: center;
    width: 100%;
    display: block;
    text-align: center;
}
#dg-contact > .contact-form form #submit {
    width: 85%;
    height: 90%;
}