@layer components {
    .alternating-block{
        --column-gap: calc(var(--spacer) * 6.25);

        .btn{
            margin-top: calc(var(--spacer) * 2);
        }

        .content-wrapper,
        .image-wrapper{
            padding-block: calc(var(--spacer) * 3.125);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .content-wrapper{
            border-right: 1px solid rgb(var(--color-md-gray));
            align-items: flex-start;
        }

        .alternating-row{
            &:first-child{
                border-top: 1px solid rgb(var(--color-md-gray));
            }

            &:not(:last-child){
                border-bottom: 1px solid rgb(var(--color-md-gray));
            }

            @container (max-width: 768px) {
                border: none;
                padding-top: calc(var(--spacer) * 3.125);
            }

            &:nth-child(2n) .row{
                flex-direction: row-reverse;

                .content-wrapper{
                    border-right: none;
                }

                .image-wrapper{
                    border-right: 1px solid rgb(var(--color-md-gray));
                }
            }

            @container (max-width: 768px) {
                .row,
                &:nth-child(2n) .row{
                    flex-direction: column-reverse;
                }

                .image-wrapper,
                .content-wrapper{
                    border-left: none;
                    border-right: none;
                    border-bottom: 1px solid rgb(var(--color-md-gray));
                }
            }
        }
    }
}