#transformation {
    margin: 7.5em;

    .pl-container {
        background: var(--light-green);
        padding: 3em;
        border-radius: 10px;
    }

    .absolute-img {
        right: 0;
        top: 0;
        transform: translateY(-50%);

        img {
            max-height: 22.5em;
        }
    }

    #transformationMain {
        padding: 3em;

        .main-element {
            margin: 0 3em;

            li {
                margin: 1em 0;
            }
        }

    }

    .title {
        color: white;
        text-align: center;
        width: 45%;
    }
}

@media only screen and (max-width: 768px) {
    #transformation {
        margin-left: 0.2em;
        margin-right: 0.2em;

        .title {
            width: 100%;
        }

        #transformationMain {
            padding-left: 0;
            padding-right: 0;

            >* {
                display: flex;
                flex-direction: column;
            }

            .main-element {
                .content {
                    opacity: 0;
                    max-height: 0;
                    transition: all 0.1s ease-out;
                }

                &.click-title:not(:hover):not(:focus) .txt-h4::after {
                    content: "➜";
                    transform: rotate(90deg);
                }

                &.click-title:hover .content,
                &.click-title:focus .content {
                    opacity: 1;
                    max-height: 200vh;
                    transition: all 0.25s ease-in;
                }

                &:has(+ .main-element) {
                    border-bottom: 1px solid var(--dark-blue);
                    margin-bottom: .5em;
                    padding-bottom: .5em;
                }
            }
        }
    }
}