section[data-particles] {
    margin-bottom: -125px;
}

section.portfolio {
    position: relative;
    margin-top: 75px;
    z-index: 50;
    overflow: hidden;

    &.decorator-right {
        > div.wrapper {
            flex-direction: row-reverse;

            > div.decorator {
                div.media {
                    left: 0;
                    right: unset;
                }
            }

            > div.content {
                h2, p.subtitle {
                    text-align: right;
                }
            }
        }
    }

    &[data-particles] {
        a {
            color: white;
        }
    }

    &:not([data-particles]) {
        margin-top: 125px;
    }
    

    > div.wrapper {
        display: flex;
        gap: 22px;
        align-items: center;

        > div.decorator {
            --mediaWidth: 600px;
            --mediaHeight: 400px;
            
            display: block;
            width: 350px;
            height: var(--mediaHeight) !important;
            position: relative;

            div.media {
                width: var(--mediaWidth);
                height: 100%;
                position: absolute;
                right: 0;

                img, video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                    border-radius: 18px;
                    box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.25);
                }
            }
        }

        > div.content {
            >*:not(:first-child):not(:nth-child(2)) {
                margin-top: 22px;
            }

            button,.button {
                width: fit-content;

                &.case-study {
                    width: 300px !important;
                }
            }
        }
    }

    @media (max-width: 1500px) {
        div.decorator {
            width: 500px !important;
        }
    }

    @media (max-width: 996px) {
        div.wrapper {
            flex-direction: column !important;
            align-items: center;

            div.decorator {
                order: 2;
                width: 85% !important;
                height: fit-content !important;

                div.media {
                    position: relative;
                    width: 100%;

                    img {
                        width: 100%;
                    }
                }
            }

            div.content {
                order: 1;

                h2, p.subtitle {
                    text-align: center !important;
                }
            }
        }
    }
}