.details {
    display: flex;
    flex-flow: column;
    gap: 60px;
}

    .details .img-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

        .details .img-info img {
            width: 72%;
            align-self: flex-start;
            margin: 0;
        }

        .details .img-info p {
            font-size: 20px;
            padding-left: 105px;
            width: 100%;
            padding-right: 25px;
            align-self: flex-start;
            margin: 0;
        }

        .details .img-info.right img {
            align-self: flex-end;
        }

        .details .img-info.right p {
            padding-right: 105px;
            padding-left: 25px;
            align-self: flex-start;
            /*text-align: right;*/
            /*max-width: 70%;*/
        }

    .details .color-layer {
        display: flex;
        flex-flow: column;
        gap: 9.88%;
        padding-bottom: 60px;
    }

        .details .color-layer .img-info p {
            color: #242424;
            padding: 0 15px;
        }

        .details .color-layer .img-info.right p {
            padding: 0;
            align-self: flex-end;
            text-align: right;
            padding: 0 15px;
        }


    .details .img-info.center img, .details .img-info.center p {
        align-self: center;
        margin: 0;
        padding: 0 15px;
        width: 100%;
    }

    .details .horizontal-detail .img-info:first-child{
            margin-bottom: 60px;
    }

    .details .horizontal-detail .img-info:first-child img{
        width: 100%;
        padding-right: 16px;
    }

        .details .horizontal-detail .img-info.right img {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }

        @media(min-width: 992px) {
            .details {
                gap: 120px;
            }

                .details .img-info {
                    flex-direction: row;
                }

                    .details .img-info img {
                        width: min(calc(559 / 1366 * 100vw),559px);
                        /*max-width: 536px;*/ /*comentado porque no componente de content left/right a imagem deve ocupar 50% */ 
                    }

                .details .horizontal-detail .img-info:first-child img {
                    width: min(calc(671 / 1366 * 100vw),671px);
                }

                .details .horizontal-detail .img-info.right img {
                    width: min(calc(671 / 1366 * 100vw),671px);
                }

                    .details .img-info p {
                        padding-left: 0;
                        align-self: flex-start;
                        padding-top: 200px;
                        max-width: 425px;
                        font-size: 20px;
                    }

                    .details .img-info.right {
                        flex-direction: row-reverse;
                    }

                        .details .img-info.right p {
                            padding-right: 5px;
                            padding-left: 0;
                            align-self: flex-start;
                            padding-top: 200px;
                            text-align: right;
                            
                        }

                .details .color-layer {
                    flex-direction: row;
                    padding-right: 9.88%;
                    padding-bottom: 120px;
                }

                    .details .color-layer .img-info {
                        flex-direction: column;
                    }

                        .details .color-layer .img-info:first-of-type {
                            /*width: 100%;*/
                            padding-bottom: 116px;
                        }

                        .details .color-layer .img-info:last-of-type {
                            align-self: flex-end;
                        }

                        .details .color-layer .img-info p {
                            padding: 0;
                            padding-top: 10px;
                            padding-left: 135px;
                            max-width: fit-content;
                        }

                        .details .color-layer .img-info.right p {
                            padding-left: 0;
                            align-self: flex-start;
                            text-align: left;
                            max-width: 75%;
                        }

            /*.details .color-layer .img-info.center {
                padding: 0 135px;
            }

            .details .color-layer .img-info:first-of-type img {
                margin-top: -305px;
                width: min(calc(559 / 1366 * 100vw), 559px);
            }

            

            .details .color-layer .img-info.right img {
                width: min(calc(536 / 1366 * 100vw),536px);
            }

            .details .color-layer .img-info.right {
                align-self: flex-end;
                margin-right: 135px;
                margin-top: max( calc(-400 / 1366 * 100vw), -400px);
            }

            .details .color-layer .img-info.center img {
                padding: 0;
            }

            .details .color-layer .img-info.center p {
                padding-left: 0;
                align-self: flex-start;
            }*/
        }