.koi-place-to-place-navigation {
    --container-gutter-vertical: var(--sds-size-space-300);
    --container-gap: var(--sds-size-space-600) var(--sds-size-space-300);
    --place-label-font-size: 1.25rem;
    --previous-arrow-content: unset;
    --next-arrow-content: unset;

    --layout-rows: 2;
    --layout-columns: 2;
    --previous-arrow-grid-area: 1 / 1 / 1 / 1;
    --next-arrow-grid-area: 1 / 2 / 1 / 2;
    --back-grid-area: 2 / 1 / 2 / span var(--layout-columns);
    --place-icon-width: 3.75rem;
    --place-content-gap: var(--sds-size-space-300);

    @media (width >=48rem) {
        --container-gutter-vertical: var(--sds-size-space-600);
        --container-gap: var(--sds-size-space-600);
        --place-label-font-size: 1.75rem;

        --layout-rows: 1;
        --layout-columns: 3;
        --previous-arrow-grid-area: 1 / span 1;
        --back-grid-area: 1 / span 1;
        --next-arrow-grid-area: 1 / span 1;

        --place-icon-width: unset;
    }

    display: grid;
    grid-template-columns: repeat(var(--layout-columns), 1fr);
    grid-template-rows: var(--layout-rows);
    gap: var(--container-gap);
}

.koi-place-to-place-navigation-back {
    grid-area: var(--back-grid-area);
    display: flex;
    gap: var(--container-gap);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.koi-place-to-place-navigation-back-link {
    all: revert;
    color: var(--colors-brand);
    text-decoration: none;
    text-align: center;
    text-wrap: balance;
    font-family: var(--fonts-nexa-regular);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 15px */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;

    &:hover {
        text-decoration: underline;
    }
}

.koi-place-to-place-navigation-place {
    >* {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--place-content-gap);
    }

    &.previous-place {
        grid-area: var(--previous-arrow-grid-area);
    }

    &.next-place {
        grid-area: var(--next-arrow-grid-area);
    }
}

.koi-place-to-place-navigation-place-icon {
    width: var(--place-icon-width);
}


.koi-place-to-place-navigation-place-label {
    color: var(--colors-brand);
    font-family: var(--fonts-maiah);
    font-size: var(--place-label-font-size);
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1px;
}