.case-list {
    height: 100%;
    display: flex;
    gap: 60px;
    flex-direction: column-reverse;
    --color: var(--block-text-color, var(--color-text, currentColor));

    & .case-list__column {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 40px;
        position: relative;

        &:has(img) {
            flex: 0 0 auto;
            left: 50%;
            width: calc(100% + (2 * var(--content-margin)));
            margin-left: calc(-50% - var(--content-margin));
        }

        & img,
        & .case-list__column--image,
        & .case-list__column--image-placeholder {
            z-index: 1;
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        & .case-list__column--image {
            z-index: 1;
            opacity: 0;
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            transition: all 0.5s ease-in-out;

            &.show {
                z-index: 2;
                opacity: 1;
            }
        }

        & .case-list__column--image-placeholder {
            opacity: 0.1;
            background-color: #242320;
        }

        & .case-list__column--list {
            margin: 0;
            padding: 0;
            max-height: 325px;
            padding-right: var(--gap-default, 0);
            list-style-type: none;
            border-right: 1px solid var(--color);
            overflow-y: scroll;
            scrollbar-width: none;

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

            & .scrollbar {
                top: 0;
                right: 0;
                width: 10px;
                height: 100%;
                position: absolute;
                background-color: transparent;

                & .thumb {
                    top: 0;
                    width: 100%;
                    position: absolute;
                    background-color: var(--color);
                }
            }

            & .case-list__column--list-item {
                & a {
                    display: block;
                    font-size: var(--h2);
                    font-weight: 400;
                    line-height: normal;
                    text-decoration: none;
                    position: relative;
                    padding: 20px 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    border-bottom: 1px solid var(--color);

                    &, & *, &::after {
                        transition: all 0.5s ease-in-out;
                    }

					& h3 {
						font-size: inherit;
					}

                    & span {
                        inset: 0;
                        opacity: 0;
                        display: grid;
                        align-items: center;
                        position: absolute;
                        color: var(--color);
                        border-bottom: 1px solid var(--color);

                        &::after {
                            top: 50%;
                            right: 0;
                            width: 1em;
                            height: 39px;
                            aspect-ratio: 1;
                            content: '';
                            translate: 0 -50%;
                            display: block;
                            position: absolute;
                            background-color: var(--color);
                            mask-image: url('../../images/arrow-right-short.svg');
                            mask-size: contain;
                            mask-repeat: no-repeat;
                            mask-position: right;
                        }
                    }

                    @media (hover: hover) {
                        &:hover {
                            color: transparent;

                            &::after {
                                border-color: var(--color);
                            }

                            & span {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }

        & .standout-button {
            margin-block-start: 0 !important;
        }
    }
}

.standout-case-list {
    margin-block-end: 0 !important;
}