.usproject-detail .banner-content{ padding-bottom: 20px !important}
.usproject-detail .banner-image{ padding: 0 15px 15px 15px; max-height: none !important}
.usproject-detail .usproject-image{ height:0px; padding-top: 100% }
.usproject-detail .usproject-image img{ height: 100%; width: 100%; object-fit: cover; position: absolute; top:0; left: 0}

.usproject-image-footer{ height: 60px;background: #000000b0;position: absolute;bottom: 0; left:0; right:0; margin:auto;z-index: 100;  display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 0 20px}
.usproject-image-count{  font-size: 22px; font-weight: 100}

.usproject-image-nav{ display: flex; width: 85px;justify-content: space-between;  }
.usproject-image-arrow { height: 35px; width: 35px;  line-height: 35px;  text-decoration: underline;  flex-shrink: 0;    text-align: right;  order: 10; cursor: pointer}
.usproject-image-arrow:before{display: block;  position: absolute;  content: "";  width: 26px;  height: 26px;  top: 0;  bottom: 0;  right: 0;  margin: auto;  background-image: url(sprite-icons.svg#arrow);  background-repeat: no-repeat;  background-position: center;  background-size: 13px;  transition: all 0.3s;}
.usproject-image-arrow:after{    display: block;  position: absolute;  content: "";  width: 26px;  height: 26px;  border: 1px solid var(--color-gray-strong);  border-radius: 3px;  transform: rotate(45deg);  top: 0;  bottom: 0;  right: 0;  margin: auto;  transition: all 0.3s;}
.usproject-image-prev.usproject-image-arrow:before{ transform: rotate(180deg)}

.usproject-image-prev.usproject-image-arrow:after{ transform: rotate(-45deg)}
.usproject-image-prev.usproject-image-arrow:hover:after{ transform: rotate(-135deg)}
.usproject-image-next.usproject-image-arrow:hover:after{ transform: rotate(135deg)}
.usproject-detail .usproject-image{ cursor: zoom-in}

.section-usprojects .page-content h2{ text-align: center}
.usprojects-items{ margin-top: 30px}

.usprojects-item{background: #f9f8f7; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 6px 9px -3px rgb(0 0 0 / 10%);}
.usprojects-item .swiper-slide { height: auto}
.usprojects-item .usproject-image { height: 100%; cursor: zoom-in}
.usprojects-item .usproject-image img{ height: 100%; object-fit: cover}
.usprojects-item-image{ border-radius: 8px; overflow: hidden;}

.usprojects-item-info{ padding: 15px; }
.usprojects-item-name{ font-family: 'AcherusFeral', sans-serif; font-size: 20px; font-weight: normal }
.usprojects-item-location{   color: var(--color-brown); margin-bottom: 10px;}
.usprojects-item-worktype{ margin-bottom: 10px}
.usprojects-item-worktype span:last-child{ font-weight: 600;}
.usprojects-item-info-text{ margin-top: 20px}
.usprojects-item-info-text p{ margin-bottom: 10px}

@media only screen and (min-width: 768px) {
    /**/
    .usproject-detail .page-banner .banner-inner{ display: flex; flex-direction: column; max-width: 768px; margin: auto  }
    .usproject-detail .page-banner .banner-inner > div{ width: 100%}
     .usproject-detail .page-banner .banner-image{ max-height: unset}

    .section-usprojects .page-content h2{ font-size: 24px}
    .usprojects-item{ display: flex; justify-content: space-between; margin-bottom: 30px}
    .usprojects-item >div{ flex-basis: 50%}
    .usprojects-item:nth-child(even) .usprojects-item-info{ order: -1}
    }

@media only screen and (min-width:1024px) {
    .banner-item-title{ }

    .usproject-detail .page-banner .banner-inner{ flex-direction: row; max-width: 1320px;}
    .usproject-detail .page-banner .banner-inner > div{ width: 50%}
    .usproject-detail .page-banner .banner-content{ }
    .usproject-detail .page-banner .usproject-swiper{ height: 100%}
    .usproject-detail .banner-image{ padding: 0 }
    .usproject-detail .usproject-image{ height:100%; padding: 0;}
    .usproject-detail .usproject-image img{ }

    .usprojects-items{ margin-top: 40px}

    .usprojects-item-name{  font-size: 24px;}

    .usprojects-item-info{ padding: 30px; font-size: 16px }


}
@media only screen and (min-width:1280px) {

    .section-usprojects .page-content h2{ font-size: 28px}

    .usprojects-items{ margin-top: 50px}

    .usprojects-item{ margin-bottom: 40px}
    .usprojects-item-name{  font-size: 28px;}
    .usprojects-item-location{ margin-bottom: 20px;}
    .usprojects-item-worktype{ margin-bottom: 20px}

    .usprojects-item-info{ padding: 40px; font-size: 16px }

}