/* @group Example
------------------------------------ */

.penthouse-details .divided-list {

    display: flex;
    gap: var(--_gap);
    list-style: none;
    padding: 0;
    justify-content: center;
}

.penthouse-details .bp-column {
    text-align: center;
}

.penthouse-details .bp-column>* {
    margin-inline: auto;
}

.penthouse-details .divided-list:is(:first-of-type)  li::after,
.penthouse-details .divided-list:not(:first-of-type) li:not(:last-of-type)::after {
    content: '|';
    color: var(--light-purple);
    margin-left: var(--_gap);
}


@media only screen and (min-width : 961px) {
    .penthouse-details {
        --_gap: 1rem;
    }

    .penthouse-details .divided-list:is(:first-of-type) li:is(:last-of-type)::after {
        content: none;
    }

    .penthouse-details .divided-list li {
        display: flex;
        gap: .2rem;
        text-align: left;
    }

    .penthouse-details .bp-multimedia {
        height: 75.9rem;
    }
}


@media only screen and (min-width : 0) and (max-width : 960px) {

    .penthouse-details {
        --_gap: 0.5rem;
    }

    .penthouse-details .divided-list li {
        text-align: center;
        --fs: 1.6rem;
        --lh: 1.4em;
    }

    .penthouse-details .divided-list {
        flex-wrap: wrap;
    }

    .penthouse-details .bp-multimedia {
        height: 28.7rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .penthouse-details .bp-column {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .penthouse-details.animateActive .bp-column {
    animation: fadeUp var(--duration) forwards;
    animation-delay: var(--delay, 0);
    --delay: 0.3s;
}