/**
 * Page Specific Common Styles
 */
.contact {
    --color-main: var(--color-primary);
    --color-main-light: var(--color-primary);

    padding-bottom: calc(var(--spacing-4xl) + 100px);
}

.section {
    margin-top: calc(var(--spacing-4xl) + 60px);
}

.section ~ .section {
    margin-top: calc(var(--spacing-4xl) + 50px);
}

.section__container {
    margin-inline: auto;
    width: min(90%, 932px);
}

.section__title {
    border-bottom: 1px solid var(--color-primary);
    font-size: calc(var(--text-2xl));
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-md);
    text-align: center;
    text-wrap: auto;
}

.section__title span {
    display: inline-block;
}

.section p {
    letter-spacing: 0;
    line-height: 2.59;
}

.section a {
    font-family: var(--font-serif);
    font-weight: 300;
}

.section a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.section ul {
    display: grid;
    font-size: var(--text-md);
    gap: var(--spacing-2xl);
    letter-spacing: 0;
    line-height: 2.59;
}

.section ul h3 {
    font-weight: 400;
    padding-bottom: var(--spacing-md);
}

.section ul p {
    font-family: var(--font-serif);
    padding-left: calc(var(--spacing-md) + 2px);
}

@media (max-width: 768px) {
    .section ul p {
        line-height: 2.2;
    }
}

/**
 * Top
 */
.top {
    padding-top: calc(var(--spacing-4xl) + 10px);
}

.top__heading {
    font-size: calc(var(--text-2xl) + 3px);
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.78;
    margin-inline: auto;
    margin-top: var(--spacing-xl);
    text-align: center;
    width: 90%;
}

.top__heading span {
    display: inline-block;
}

.top__body {
    font-size: var(--text-md);
    font-weight: 300;
    line-height: 2.59;
    margin-inline: auto;
    margin-top: var(--spacing-xl);
    width: min(90%, 1033px);
}

.top__note {
    font-size: var(--text-sm);
    margin-top: var(--spacing-md);
}

@media (max-width: 910px) {
    .top__body {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .top__heading {
        font-size: 20px;
    }

    .top__body {
        line-height: 2;
    }
}