.family-space-banner {
    padding-block: clamp(4.5rem, 6.5vw, 6rem);
    border-block: 1px solid rgb(199, 199, 196);
    background-color: rgb(255, 255, 255);
    color: rgb(17, 17, 17);
}

.family-space-banner__container {
    max-width: 81.5rem;
}

.family-space-banner__inner {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.family-space-banner__lock {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline: auto;
    background-color: rgb(112, 112, 112);
    -webkit-mask: url("/assets/images/icons/lock.svg") center / contain no-repeat;
    mask: url("/assets/images/icons/lock.svg") center / contain no-repeat;
}

.family-space-banner__title {
    margin: 1rem 0 0;
    font-family: var(--font-latin), sans-serif;
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    font-weight: 500;
    letter-spacing: clamp(0.25rem, 0.55vw, 0.45rem);
    line-height: 1.5;
}

.family-space-banner__description {
    margin: 1.25rem 0 0;
    color: rgb(91, 91, 91);
    font-family:
        var(--font-cjk-primary),
        var(--font-cjk-secondary),
        sans-serif;
    font-size: 0.9375rem;
    line-height: 1.8;
}

.family-space-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    background-color: transparent;
    color: rgb(17, 17, 17);
    font-family: var(--font-latin), sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-decoration: none;
}

a.family-space-banner__cta:link,
a.family-space-banner__cta:visited,
a.family-space-banner__cta:hover,
a.family-space-banner__cta:focus,
a.family-space-banner__cta:active {
    background-color: transparent;
    color: rgb(17, 17, 17);
    text-decoration: none;
}

a.family-space-banner__cta:focus-visible {
    outline: 2px solid rgb(17, 17, 17);
    outline-offset: 0.25rem;
}

.family-space-banner__cta--pending {
    cursor: default;
}

.family-space-banner__cta-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
}

.family-space-banner__cta:hover .family-space-banner__cta-arrow,
a.family-space-banner__cta:focus-visible .family-space-banner__cta-arrow {
    transform: translateX(0.35rem);
}

html:lang(ko) .family-space-banner__description {
    overflow-wrap: break-word;
    word-break: keep-all;
}

html:lang(ja) .family-space-banner__description {
    overflow-wrap: anywhere;
    line-break: strict;
    word-break: normal;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .family-space-banner {
        padding-block: 4rem;
    }
}

@media (max-width: 767.98px) {
    .family-space-banner {
        padding-block: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .family-space-banner__cta-arrow {
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    .family-space-banner__cta:hover .family-space-banner__cta-arrow,
    a.family-space-banner__cta:focus-visible .family-space-banner__cta-arrow {
        transform: none;
    }
}