#panel1 {
    width: 100%;
    height: 623px;
    position: relative;
}
#panel1 > .background-img-container{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: stretch;
}
#panel1 > .background-img-container > div:first-child {
    flex: 1;
    background-image: url("./../assets/images/panel_1_repeatable.webp");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    background-position: center;
}

#panel1 > .background-img-container > div:last-child {
    width: 352px;
    background-image: url("./../assets/images/panel_1_fix.webp");
    background-size: auto 100%;
    background-repeat:no-repeat;
    background-position: center;
}

#panel1 > .content-container {
    clip-path: polygon(0 0, 80% 0, 70% 100%, 0 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    left:0;
    top: 0;
    background: linear-gradient(
        to right,
        rgba(var(--color-primary-rgb), 1) 0%,
        rgba(var(--color-primary-rgb), 1) 50%,
        rgba(var(--color-primary-rgb), 0.95) 60%,
        rgba(var(--color-primary-rgb), 0.8) 70%,

    
        rgba(var(--color-primary-rgb), 0.0) 100%
    );


}

#panel1 > .content-container div {
    margin-left: 4rem;
    margin-top: 2rem;
    max-width: 65%;
    word-wrap: break-word;
    
}

#panel1 > .content-container > .font-header{
    font-size: clamp(2rem, 4vw, 4.3rem);
    font-family: var(--font-family-header);
    color: var(--color-highlight);
    
}

#panel1 > .content-container ul {
    margin-left: 2rem;
    font-size: clamp(2.5rem, 4vw, 2.5rem);
}



@media (min-width: 460px) AND (max-width: 767px) {
    #panel1 > .content-container > .font-header{
        font-size: clamp(2rem, 4vw, 2.5rem);
        
        
    }
    
    #panel1 > .content-container ul {
       
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
  
}
  
@media (max-width: 460px) {
    #panel1 > .content-container > .font-header{
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        
        
    }
    
    #panel1 > .content-container ul {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    #panel1 > .content-container div {
        margin-left: 1rem;
        margin-top: 2rem;
        max-width: 65%;
        word-wrap: break-word;
        
    }
}