.template-contact-form {
    grid-column: center-start 1 / center-end 6;

    display: grid;
    grid-template-columns: max-content 1fr 40ch;
    align-items: start;
    gap: 1.6rem;

    padding-top: var(--heading-margin);

    & h1 {
        grid-column: 1 / -1;

        font-size: 175%;
        font-weight: 700;
    }

    & > label {
        grid-column: 1;

        display: flex;
        flex-direction: column;
        align-items: end;

        & .primary {
            font-weight: 700;
        }

        & .required::before {
            content: "* ";
            color: var(--p-foreground-red);
        }
        & .optional {
            color: color-mix(in srgb, var(--background-color), var(--text-color) 60%);
        }
    }

    & .input {
        display: flex;
        flex-direction: column;
    }

    & textarea {
        align-self: stretch;
        resize: vertical;
    }

    & .checkbox {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
    }

    & .description {
        --paragraph-padding: 0.25lh;

        border-bottom: 0.1rem solid var(--border-2);
        padding-bottom: 1.6rem;

        & p:first-child {
            padding-top: 0;
        }
        & p:last-child {
            padding-bottom: 0;
        }
    }

    & #input-inquiry {
        height: 75dvh;
    }

    & .buttons {
        padding-top: 1lh;
        grid-column: 2;
    }

    & .error {
        display: none;
        &.has-error {
            display: flex;
        }

        flex-direction: row;
        gap: 0.2rem;
        padding-top: 0.4rem;

        &.error::before {
            content: "";
            display: block;
            width: 2.4rem;
            height: 2.4rem;
            flex-shrink: 0;

            background-repeat: no-repeat;
            background-size: cover;
            background-image: var(--icon-error);
        }
    }

    & .jirai,
    & .kirai {
        display: none; /* important: do not change this, or the controls will appear to screen readers! */
    }

    @media (max-width: 1140px) {
        grid-template-columns: auto;
        max-width: 70ch;
        justify-self: center;

        & > label {
            align-items: start;
            flex-direction: row;
            margin-top: 1lh;

            & .primary {
                padding-right: 1.5ch;
            }

            & .required::before {
                content: unset;
            }
            & .required::after {
                content: " *";
                color: var(--p-foreground-red);
            }
        }

        & #input-inquiry {
            height: 50dvh;
        }

        & .buttons {
            grid-column: 1;
        }
    }
}