.all-in-one-wrapper {
    background-color: var(--col-000);
    padding: 7rem 0;
    position: relative;
    view-timeline-name: --section;
    view-timeline-axis: block;

    .all-in-one-section {
        color: var(--color-ink);

        .scroll-area {
            margin: 2rem 0;
            --item-width: min(60rem, 85vw);
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            padding-inline: calc((100vw - var(--item-width)) / 2);
            gap: var(--gap-size);
            scrollbar-width: none;

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

        .image-with-text {
            flex: 0 0 var(--item-width);
            scroll-snap-align: center;
            position: relative;
            aspect-ratio: 16 / 9;

            &.image-1 {
                .text {
                    color: #ffe88b;
                }

                &::after {
                    border-radius: var(--border-radius-s);
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(335deg, rgb(18 32 51 / .7), transparent 55%);
                }
            }

            &.image-2 {
                .text {
                    color: #4e3322;
                }

                &::after {
                    border-radius: var(--border-radius-s);
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(335deg, rgb(255 255 255 / 1), transparent 65%);
                }
            }


            img {
                border-radius: var(--border-radius-s);
                aspect-ratio: 16 / 9;
                object-fit: cover;
                position: absolute;

            }

            .text {
                max-width: 25rem;
                padding: 2rem 2rem;
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 1;

                h3 {
                    color: inherit;
                    font-size: 2rem;
                }

                p {
                    font-size: 1.0rem;
                    margin-bottom: 0;
                }

                div {
                    margin-top: 1.5rem;

                    .button-secondary {
                        color: inherit;
                        outline-color: #ffe88b;;

                        &:hover {
                            background-color: #ffe88b;
                            color: var(--color-muted);
                        }
                    }
                }
            }
        }


    }
}


@media (max-width: 40rem) {
    .all-in-one-wrapper {

        .all-in-one-section {

            .image-with-text {
                aspect-ratio: 3 / 4;

                .text {
                    h3 {
                        font-size: 1.8rem;
                    }
                }

                img {
                    aspect-ratio: 3 / 4;
                }
            }
        }
    }
}