.page-contact {
    width: 100%;
}

.page-contact__inner {
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.page-contact__content {
    margin-bottom: 2.5rem;
}

.page-contact__title {
    font-size: 1.75rem;
    font-weight: 800;
}

.page-contact__subtext {
    max-width: 75ch;
    font-size: 1rem;
    font-weight: 300;
}


.page-contact__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 2.5rem;
    row-gap: 2rem;
}

/* Details */
.page-contact__details {
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 1px #01606630;
    background-color: var(--color-surface);
}

.page-contact-details__title {
    font-size: 1.75rem;
    font-weight: 800;
}

.page-contact-details__column {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
}

.page-contact-details-column__icon svg {
    width: 24px;
    height: 24px;
    fill: var(--color-secondary);
}

.page-contact-details-column__content {
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    color: var(--color-on-surface);
}

.page-contact-details-column__title {
    font-weight: 600;
}



/* Question */
.page-contact__question {
    max-width: min(31.25rem, 100%);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 1px #01606630;
    background-color: var(--color-surface);
}

.page-contact-question__icon {
    fill: var(--color-on-surface);
}

.page-contact-question__title {
    margin-top: .25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.page-contact-question__subtext {
    font-size: .875rem;
    font-weight: 300;
    color: var(--color-on-surface);
}

.button.page-contact-question__button {
    margin-top: .75rem;
}



/* Maintenance banner */
.page-contact__maintenance-banner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: var(--border-radius);
    background-color: var(--color-secondary);
}

.page-contact-maintenance-banner__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-on-secondary);
}

.page-contact-maintenance-banner__subtext {
    font-size: .875rem;
    font-weight: 300;
    color: var(--color-on-secondary);
}

.button.page-contact-maintenance-banner__button {
    margin-left: auto;
}