body, html {width: 100%; background-color: #f4f0ec;}
.navbar {background-color: #f4f0ec;}
main, #prj-image {max-width: 100%; --bs-gutter-x: 0;}
main > .container-fluid {display: flex; flex-direction: column; align-items: center;}
.masthead {margin-bottom: 70px;}
.masthead span {display: block; text-align: center;}
.masthead .back {margin-bottom: 50px;}
.masthead .back a {color: #000!important; font-weight: bold; text-decoration: none!important;}

.title {margin-bottom: 25px;}
.text {text-transform: uppercase;}

#prj-image .col-lg-6 img, #prj-image .col-lg-12 img {max-width: 100%;}

@media only screen and (min-width: 992px) {
    #prj-image {padding-left: 80px; padding-right: 80px;}
}

@media only screen and (min-width: 576px) {
    main {margin-top: 80px;}
    .title {font-size: 3.5rem;}
    .text {font-size: 1.2rem; padding-left: 100px; padding-right: 100px;}
    #prj-image .col-lg-6, #prj-image .col-lg-12 {display: flex; padding: 2px;}
    #prj-image .left {justify-content: flex-end;}
    #prj-image .right {justify-content: flex-start;}
    #prj-image .center {justify-content: center;}
    #prj-image .rsz-y img {height: 700px;}
}

@media only screen and (min-width: 576px) and (max-width: 992px) {
    #prj-image .col-lg-6, #prj-image .col-lg-12 {justify-content: center;}
}

@media only screen and (max-width: 576px) {
    main {width: 100%; padding-top: 120px;}
    main > .container-fluid {padding-left: 0; padding-right: 0;}
    .title {font-size: 2.8rem;}
    .text {font-size: 1rem; padding-left: 50px; padding-right: 50px;}
}