.container-1{
    width:50%;
    height:25px;
    color:white;
    background:linear-gradient(to right ,rgba(176, 1, 91, 1) 10% , rgba(176, 1, 91, 0));
}

.container-1 h1{
    margin-left:5%;
}

.container-2{
    display: flex;
    position:relative;
    margin-top:5px;
}

.container-2 p{
    position: absolute;
    font-size: 0.8rem;
    display: block;
    width:50%;
    font-weight: bold;
    top:20%;
    left:5%;
    background-color: rgba(255,255,255,.6)

}


.section-1 .container-2{
    width:100%;
    background-color: antiquewhite;
    position: relative;
}

.section-1  .container-2 .img-wrapper{
    display:flex;
    position: relative;
    width:100%;
}


.section-1 .img-wrapper .img-inner{
    position:absolute;
    z-index: 2;
    overflow: hidden;
    width:40%;
    height:55%;
    right:-5%;
    bottom: 0%;

}

.section-1  .container-2 .img-wrapper .hero-img{
    position: absolute;
    width:100%;
    position: relative;
    z-index: 1;
}

.section-1  .container-2 .img-wrapper .img-inner .hero-portrait{
    width:100%;
    height:auto;
}

.attention{
font-size: 0.5rem;
background-color: rgba(176, 1, 91, 0.2);
margin: auto;
padding:0.4rem;
}