.contact-page {
    background-color: var(--color-neutral-100);
    padding-bottom: 32px;
}

.keyword-bar {
    background-color: var(--color-neutral-100);
    box-shadow: 2px 15vmax 1px 17vmax var(--color-neutral-100);
}

.contact-header,
.contact-navigate__arrow,
.contact-navigate__mobile {
    display: none;
}

.contact-navigate {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.contact-navigate__btn {
    width: calc((100% / 2) - 12px);
    text-align: center;
}

    .contact-navigate__btn > * {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        border-radius: 2px;
        background-color: var(--color-neutral-0);
        border: 1px solid var(--color-neutral-200);
    }

.contact-navigate__btn--active > * {
    background-color: var(--color-secondary-900);
    color: var(--color-neutral-0);
}

    .contact-navigate__btn--active > *:hover {
        color: var(--color-neutral-0);
    }

    .contact-navigate__btn--active > * .contact-navigate__icon path {
        fill: var(--color-neutral-0);
    }

.contact-navigate__icon {
    --size: 24px;
    width: var(--size);
    height: var(--size);
    margin-right: 8px;
}

.contact-navigate__text {
    font: 500 16px var(--font-body);
}

.info-wrapper {
    padding: 16px;
    border: 1px solid var(--color-neutral-200);
    border-radius: 2px;
    background-color: var(--color-neutral-0);
}

    .info-wrapper > *:nth-last-child(n+2) {
        margin-bottom: 16px;
    }

.info-wrapper__content * {
    margin-bottom: 24px;
}

.info-wrapper__header {
    font: 700 32px var(--font-highlight);
    text-align: center;
}

.links {
    border-radius: 4px;
    padding: 16px;
    background-color: var(--color-neutral-100);
}

.links__title {
    font: 500 16px var(--font-body);
    color: var(--color-primary-900);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.links__item > * {
    display: flex;
}

.links__item:nth-last-child(n+2) {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--color-neutral-200);
}

.links__icon {
    width: 9px;
    height: 9px;
    margin-top: 7px;
    margin-right: 8px;
}

.links__text {
    font: 500 16px/149% var(--font-body);
}

@media screen and (max-width: 576px) {
    .contact-page {
        background-color: var(--color-neutral-0);
        padding-bottom: 24px;
    }

    .contact-header {
        display: block;
        font: 700 20px var(--font-highlight);
        text-align: center;
        margin-bottom: 8px;
    }

    .contact-navigate {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

        .contact-navigate > *:first-child {
            margin-bottom: 8px;
        }

    .contact-navigate__btn {
        width: 100%;
    }

        .contact-navigate__btn > * {
            justify-content: flex-start;
        }

    .contact-navigate__arrow {
        display: block;
        margin-left: auto;
    }

    .contact-navigate__btn--active .contact-navigate__arrow {
        transform: rotate(180deg);
    }

    .contact-navigate__btn--active path {
        fill: var(--color-neutral-0);
    }

    .info-wrapper {
        padding: 0;
        border: none;
    }

    .info-wrapper__header {
        font-size: 24px;
    }

    .contact-navigate__mobile {
        display: block;
        margin-top: 24px;
    }

        .contact-navigate__mobile > *:nth-last-child(n+2) {
            margin-bottom: 8px;
        }

    .contact-navigate__btn--mobile-none {
        display: none;
    }
}