.stack {

    --topspace: 63px;

    position: relative;
    margin-left: calc(-1 * var(--mainpadding));
    margin-right: calc(-1 * var(--mainpadding));

    .item {
        position: sticky;
        top: var(--topspace);
        margin: 0 auto;
        min-height: 50dvh;
        /*border-top: var(--mainborder);*/
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        gap: 0;
        background: var(--wp--preset--color--light);
        opacity: 1;
        /*
        transform: translateY(20dvh);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
       */
        > *{
            flex: 0 0 50%;
        }

        .number{
                position: absolute;
                top: 2vw;
                right: 2vw;
                font-weight: 900;
                pointer-events: none;
                font-size: 10dvw;
                line-height: 1;
                color: var(--wp--preset--color--mid);
                text-decoration: underline;
            }

        &:first-of-type{
            border-top: 0px;
        }

        &:nth-of-type(2n){
            flex-direction: row-reverse;

            .number{
                left: 2vw;
            }
        }

        
        
      

        figure{
            margin-bottom: 0;
            background: #f4f4f4;
            aspect-ratio: 1 / 1;

            img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                transition: var(--maintrans);
            }
        }

        .content{
            padding: var(--mainpadding);
            box-sizing: border-box;
            position: relative;

            

            p{
                margin-bottom: 2em;
            }
        }

    }

    .item.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .btn{
            display: inline-flex;
            align-items: center;
            gap: .5em;

            svg{
                height: 1em;
                width: 1em;
            }
           
        }
}


.list{
     --topspace: 63px;

    position: relative;
    margin-left: calc(-1 * var(--mainpadding));
    margin-right: calc(-1 * var(--mainpadding));

    .item {
        position: relative;
        top: var(--topspace);
        margin: 0 auto var(--mainpadding);
        min-height: 50dvh;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: start;

        gap: 0;
        background: var(--wp--preset--color--light);
       
        > *{
            flex: 0 0 50%;
        }

       
       

        &:nth-of-type(2n){
            flex-direction: row-reverse;

        }

        

        figure{
            margin-bottom: 0;
            height: 100dvh;
            position: sticky;
            top: 0;
            

            img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                transition: var(--maintrans);
                border-radius: var(--border-radius);
            }
        }

        .content{
            padding: var(--mainpadding);
            box-sizing: border-box;
            position: relative;
            position: sticky;
            top: var(--topspace);

            h2, h3{
                hyphens: auto;
            }

            

            p{
                margin-bottom: 2em;
            }
        }

    }
}

.list-menu{
	margin:0 auto;
	padding: 1em var(--mainpadding) 1em;
	list-style:none;
	display: flex;
	gap: .5em;
	flex-wrap: wrap;
	justify-content: start;
}

@media screen and (max-width: 768px){
    .list,
    .stack{
        .item{
            display: block;
            position: relative;
            top: unset;
            min-height: unset;

            .number{
                display: none;
            }

            figure{
                position: relative;
                top: 0;
                height: auto;
                aspect-ratio: 16 / 12;
            }
            .content{
                position: relative;
                top: unset;
                background-color: var(--wp--preset--color--light);
            }
        }
    }
}