.banner-image {
    width: 100%;
    height: 220px;
    position: relative;
}

.banner-image .frame-color {
    width: 100%;
    height: 220px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    z-index: 2;
    top: 0;
}


@media screen and (min-width: 768px) {
    .banner-image {
        height: 580px;
    }
    
    .banner-image .frame-color {
        height: 580px;
    }
    
}

.banner-image .orange-frame .frame-part:first-of-type{
   width: 60px;
    height: 100%;
   background-color: #DE6B0F;
}

.banner-image .orange-frame .frame-part:nth-of-type(2){
    width: 12px;
    height: 100%;
    background-color: #F28327;
    opacity: 0.8;
}

.banner-image .orange-frame .frame-part:nth-of-type(3){
    width: 20px;
    height: 100%;
    background-color: #F6A364;
    opacity: 0.6;
}

.banner-image .orange-frame .frame-part:nth-of-type(4){
    width: 8px;
    height: 100%;
    background-color: #FAC299;
    opacity: 0.4;
    margin-right: auto;
}

.banner-image .orange-frame .frame-part:nth-of-type(5){
    width: 12px;
    height: 100%;
    background-color: #F6A364;
    opacity: 0.6;
}

.banner-image .orange-frame .frame-part:last-of-type{
    width: 18px;
    height: 100%;
    background-color: #F28327;
    opacity: 0.68;
}
 
.banner-image .blue-frame .frame-part:first-of-type{
    width: 18px;
    height: 100%;
    background-color: #336EAD;
    opacity: 0.68;
}

.banner-image .blue-frame .frame-part:nth-of-type(2){
    width: 18px;
    height: 100%;
    background-color: #6692C1;
    opacity: 0.68;
    margin-right: auto;
}

.banner-image .blue-frame .frame-part:nth-of-type(3){
    width: 25px;
    height: 100%;
    background-color: #99B7D6;
    opacity: 0.41;
}

.banner-image .blue-frame .frame-part:nth-of-type(4){
    width: 35px;
    height: 100%;
    background-color: #6692C1;
    opacity: 0.6;
}

.banner-image .blue-frame .frame-part:nth-of-type(5){
    width: 35px;
    height: 100%;
    background-color: #336EAD;
    opacity: 0.78;
}

.banner-image .blue-frame .frame-part:last-of-type{
    width: 80px;
    height: 100%;
    background-color: #004A98;
}

@media screen and (min-width: 768px) {
    .banner-image .orange-frame .frame-part:first-of-type{
        width: 160px;
     }
     
     .banner-image .orange-frame .frame-part:nth-of-type(2){
         width: 36px;
     }
     
     .banner-image .orange-frame .frame-part:nth-of-type(3){
         width: 57px;
     }
     
     .banner-image .orange-frame .frame-part:nth-of-type(4){
         width: 18px;
     }
     
     .banner-image .orange-frame .frame-part:nth-of-type(5){
         width: 34px;
     }
     
     .banner-image .orange-frame .frame-part:last-of-type{
         width: 44px;
     }
      
     .banner-image .blue-frame .frame-part:first-of-type{
         width: 44px;
     }
     
     .banner-image .blue-frame .frame-part:nth-of-type(2){
         width: 44px;
     }
     
     .banner-image .blue-frame .frame-part:nth-of-type(3){
         width: 59px;
     }
     
     .banner-image .blue-frame .frame-part:nth-of-type(4){
         width: 73px;
     }
     
     .banner-image .blue-frame .frame-part:nth-of-type(5){
         width: 72px;
     }
     
     .banner-image .blue-frame .frame-part:last-of-type{
         width: 179px;
     }
}

.banner-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .banner-image img {
        height: 580px;
    }
}