main {
    width: 100%;
    max-width: 70rem;
    margin-inline: auto;
    margin-block: 10rem 0;
    padding-inline: 1rem;
    section {
        text-align: center;
        > h2 {
            margin: 0 0 0.5rem;
            font-size: 2.5rem;
            color: var(--primary);
        }
        > p {
            margin: 0 auto 3rem;
            max-width: 40rem;
        }
        > div {
            display: flex;
            align-items: stretch;
            gap: 2rem;
            text-align: left;
            article {
                flex: 1;
                padding: 2rem;
                border: 0.1rem solid oklch(85% 0 0);
                border-radius: 0.5rem;
                background-color: var(--bg);
                box-shadow: 0 0.2rem 0.75rem rgb(0 0 0 / 10%);
                h3 {
                    margin-top: 0;
                    margin-bottom: 1.5rem;
                    font-size: 1.4rem;
                }
                address {
                    font-style: normal;
                    p {
                        margin: 0 0 1rem;
                        a {
                            color: inherit;
                            text-decoration: none;
                            &:hover {
                                color: oklch(55% 0.08 250);
                                text-decoration: underline;
                            }
                        }
                    }
                }
                form {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    label {
                        font-weight: bold;
                        margin-top: 0.5rem;
                    }
                    input,
                    textarea {
                        width: 100%;
                        padding: 0.7rem;
                        border: 0.1rem solid oklch(75% 0 0);
                        border-radius: 0.3rem;
                        font: inherit;
                        color: var(--primary);
                        background-color: var(--bg);
                        &:focus {
                            outline: 0.15rem solid oklch(75% 0.05 250);
                            border-color: transparent;
                        }
                    }
                    textarea {
                        resize: vertical;
                    }
                    button {
                        margin-top: 1rem;
                        padding: 0.7rem 1.2rem;
                        border: 0.1rem solid var(--primary);
                        border-radius: 2rem;
                        background-color: var(--primary);
                        color: var(--bg);
                        font: inherit;
                        cursor: pointer;
                        transition: background-color 0.2s ease, color 0.2s ease;
                        &:hover {
                            background-color: var(--bg);
                            color: var(--primary);
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 37.5rem) {
    main {
        margin-block: 9rem 0;
        section {
            > h2 {
                font-size: 2rem;
            }
            > div {
                flex-direction: column;
                gap: 1.5rem;
                article {
                    padding: 1.5rem;
                }
            }
        }
    }
}