.portfolio-section {
    padding: 8rem 0;
    background: var(--col-bw-000);

    .container-small p {
        color: var(--color-muted);
    }

    .portfolio-overview-shell {
        position: relative;
        margin: 1rem 0;
        padding-block-start: 3rem;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: min(3rem, 8vw);
            z-index: 2;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        &::before {
            left: 0;
            background: linear-gradient(to right, var(--col-bw-000), transparent);
            opacity: 0;
        }

        &::after {
            right: 0;
            background: linear-gradient(to left, var(--col-bw-000), transparent);
        }

        &.is-scrolled::before {
            opacity: 1;
        }

        @media (max-width: 30rem) {
            &::before,
            &::after,
            &.is-scrolled::before {
                opacity: 0;
            }
        }
    }

    .portfolio-overview {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc(2rem + 1rem);
        padding-inline: 1rem;
        gap: 1.5rem;
        scrollbar-width: none;
        text-align: left;

        &::-webkit-scrollbar {
            display: none;
        }

        article {
            margin: 1.5rem 0;
            scroll-snap-align: center;
            min-width: 23rem;
            background: var(--col-bw-100);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: start;
            transition: transform 0.3s ease;
            border-radius: var(--border-radius-s);
            background: linear-gradient(var(--col-bw-000), var(--col-bw-100));
            border: 1px solid var(--col-bw-200);
            box-shadow: var(--shadow-m);

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    transform: scale(1.03);
                }
            }

            .image {
                position: relative;
                padding: 0;

                img {
                    aspect-ratio: 1.15;
                    width: 100%;
                    object-fit: cover;
                    filter: brightness(1.1) saturate(1.1);
                }


                .bookmark-apartment {
                    position: absolute;
                    top: -1.8rem;
                    right: -2.1rem;
                    width: 7rem;
                    height: max-content;
                    transform-origin: bottom left;
                    padding: .3rem 1rem;
                    background-color: var(--col-600);
                    color: var(--col-000);
                    font-weight: 600;
                    text-align: center;
                    transform: rotate(45deg);
                    font-size: 1rem;
                    letter-spacing: .1rem;
                }

                .bookmark-parking {
                    position: absolute;
                    top: -2.9rem;
                    right: -4.5rem;
                    width: 13rem;
                    height: max-content;
                    transform-origin: bottom left;
                    padding: .3rem 1rem;
                    background-color: var(--col-bw-100);
                    color: var(--col-600);
                    font-weight: 600;
                    text-align: center;
                    transform: rotate(45deg);
                    font-size: 1rem;
                    letter-spacing: .1rem;
                }


                .area-text {
                    position: absolute;
                    bottom: .6rem;
                    left: .6rem;
                    font-family: var(--font-mono), monospace;
                    background-color: var(--col-000);
                    height: max-content;
                    padding: .3rem .75rem;
                    font-size: .875rem;
                    opacity: .8;
                }
            }

            div {
                padding: 1.2rem;
                height: 100%;
                display: flex;
                flex-direction: column;

                h3 {
                    margin-top: 0;
                    margin-bottom: 0.3rem;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    font-size: 1.2rem;
                }


                .portfolio-address {
                    justify-self: start;
                    margin-top: 0;
                    margin-bottom: 1rem;
                    color: var(--color-muted);
                    line-height: 1.3;
                    min-height: calc(1.3em * 2);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    white-space: pre-line;
                }

                .portfolio-info {
                    font-weight: 500;
                    color: var(--color-ink);
                    min-height: calc(1.3em * 3);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }

               /* .button {
                    font-size: clamp(2rem, calc(2.9rem - 1vw), 4rem);
                    cursor: pointer;
                    display: grid;
                    place-items: center;
                    border: 1px solid var(--col-600);
                    color: var(--col-600);
                    border-radius: 999px;
                    height: 1em;
                    width: 1em;
                    padding: .2em .2em .2em .25em;
                    margin-left: auto;
                }*/
                .button {
                    width: fit-content;
                }
            }
        }
    }
}