/* style info considera componentes info */

.info-grid{
            display:grid;   
}

.info-grid__info{
    z-index:100;
    background:var(--element-bg);
    text-align:center;
    grid-column: 3 / span 8;
    grid-row:1/ span 5;
    padding:2rem 3rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:var(--info-border-radius);
}
.info-grid__info .btn{
    width:100%;
    text-align:center;
    margin:1rem;
}
.info-grid__title{
    font-size:2rem;
}
.info-2 .info-grid__title{
    font-weight:var(--font-bold);
}
.info-grid__title::after{
    margin:1rem auto 2rem;
    content:"";
    background: var(--primary-color);
    height:2px;
    width:100%;
    max-width:100px;
    display:block
}

.info-grid__image1 img,
.info-grid__image2 img{
    display:none;
}
.info-grid__image1{
    max-width:540px
}
.info-grid__image1{
    max-width:860px
}

.info-3{
    grid-template-columns:1fr;
    align-items:center;
    justify-items:center;
    margin-bottom:1rem;
}
.info-3 .info-grid__info{
    grid-column:auto;
    max-width:800px;
     grid-column: 1/-1;
    grid-row: 1/-1;
    margin:1rem;
}

.info-grid__background{
z-index:0;
width:100%;
height:100%;
    grid-column: 1/-1;
    grid-row: 1/-1;
}
.info-grid__background img{
    width:100%;
    height:100%;
    object-fit:cover
}

@media screen and (min-width:768px){
    .info-grid__info .btn{
        width:auto;
        --btn-padding: .5rem 4rem;
    }
    .info-grid__title{
        font-size:2.6rem;
    }
    .info-grid.info-2{
        grid-template-columns: repeat(12,1fr);
    }
    .info-2 .info-grid__info{
        grid-column: 4 / span 6;
    }
    .info-2 .info-grid__image1 img,
    .info-2 .info-grid__image2 img{
        display:block;
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        object-fit:cover;
        border-radius:var(--info-border-radius);
    }
    .info-2 .info-grid__image1 {
        --ratio: 4/3;
        position:relative;
        z-index:50;
        grid-column: 1 / span 5;
        grid-row:2/8;
       
    }
    .info-2 .info-grid__image2 {
        --ratio: 3/4;
        position:relative;
        z-index:25;
        grid-column: 5 / 13;
        grid-row:4/10;
        
        
    }
    .info-2 .info-grid__image1,
    .info-2 .info-grid__image2{
        display:block;
        width:100%;
        height:0;
        padding-bottom: calc(100% * var(--ratio));
    }
    
    
}
@media screen and (min-width:992px){
    .info-grid__title{
        font-size:3rem;
    }
    .info-2 .info-grid__info{
        grid-column: 5 / span 4;
    }
}