✏️ Editing: _infos-image.scss Writable

.infos-photo {
    display: flex;
    flex-direction: column;
    margin-top: 80px;

.photo {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;

>div {
            width: 50%;
            max-height: 80vh;

img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

.description-photo {

display: flex;
            flex-direction: column;
            justify-content: flex-end;

>div {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                border-bottom: 1px solid black;
                padding: 30px 0;
                margin-right : 30px;
            }

h2 {
                margin-bottom: 20px;
                line-height: 1;
                word-wrap: break-word;
            }
            h4 {
                margin-bottom: 20px;
                margin-top: 0;
            }
        }
    }

.contact-photo {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 118px;
        border-bottom: 1px solid black;

>div {
            display: flex;
        }

.btn-submit {
            width: 19vw;
            margin-left: 6vw;
            display: flex;
            align-items: center; 
            justify-content: center; 
        }

.navigation-image {
            display: flex;
            flex-direction: column;
            width: 80px;
            height: 100%;
            justify-content: flex-end;
            padding-bottom: 20px;
            
            .previous-photo, .next-photo {
                display: none;
                width: 100%;
                height: 70px;
            }

img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

.navigation {

display: flex;
                justify-content: space-between;

img {
                    width: 25px;
                    height: auto;
                }
            }
        }
    }
}

.photos-other {
    padding-top: 0;
}

@media (max-width: $breakpoint__large_phone) {
    .infos-photo {
        .photo {
            flex-direction: column;
    
            >div {
                width: 100%;    
            }
            .description-photo {
                >div {
                    margin-right : 0;
                    padding: 0 0 30px 0;
                }
            }
        }
        .contact-photo {
            flex-direction: column;
            padding-top: 10px;

>div {
                flex-direction: column;
                width: 100%;
            }

.btn-submit {
                margin-left: 0;
                width: 100%;
            }
            .navigation-image {
                display: none;
            }
        }
    }
}

📁 File Manager Pro

📁 File Manager Pro