.info2 {
    padding-top: 8rem;
    padding-inline: 1.25rem;

}

.info2--wrapper {
    display: flex;
    gap: 2rem;



}

.info3--wrappers {
    display: flex;
    padding-top: 8rem;
    gap: 2rem;
    padding-inline: 1.25rem;

}

.info3--flex {
    flex: 1;
}


.info2--flex {
    flex: 1;

}

.info2--img {

    width: 100%;
    max-width: 400px;
}

.info2--img {
    order: 1;
}

.info2--button {
    color: #2eb1a3;
    font-weight: 600;
    background: none;
    border: none;
    font-size: 1.125rem;
    position: relative;
    cursor: pointer;
    align-self: center;


}

.arrow--info2 {
    width: 1.5rem;
    position: absolute;
    bottom: 0;
    top: 0.2rem;
    left: 6.7rem;
}

.info2--button::after {
    content: "";
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    background-color: #2eb1a3;
    width: 125%;
    height: 2px;


}

.info3--img {
    width: 100%;
    max-width: 400px;
}




@media(width < 1024px) {
    .info2--wrapper {
        flex-direction: column;
        align-items: center;

    }

    .info3--wrappers {
        flex-direction: column;
        align-items: center;
        gap: 2rem;

    }




    
}


@media (width < 450px){
    
    .info2--wrapper {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
    }

    .info3--wrappers {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
    }
 
    .info3--img{
        order: 1;
        flex-wrap: wrap;
    }

}