/* style info considera componentes info */
:root{
    --info-bg: linear-gradient(to left bottom, #860d33, #64122b, #441221, #250f15, #000000);
    --info-color:white;
    --info-border-radius:0rem;
    /************
    info2
    *************/
    --info2-width:420px;
    --info2-bg: var(
    --element-bg);
    --info2-color: #212529;

    --info2-box-shadow:none;
    --info2-title-weight: var(
    --font-bold);
    --info2-border-radius: 0rem;
    --info2-box-shadow:none;
    
    /* info 2 btn*/ 
    --info2-btn-border-radius: var(
    --default-border-radius);
    --info2-btn-padding: .75rem 3rem;
    --info2-btn-width:100%;
    
    /************
    info3
    *************/
    --info3-width:360px;
    --info3-sm-width:420px;
    --info3-md-width:500px;
    --info3-lg-width:720px;
    --info3-xl-width:720px;
    
    --info3-padding: 2rem 1.6rem;
    --info3-sm-padding: 2rem 4rem;
    --info3-md-padding: 2rem 6rem;
    --info3-lg-padding: 2rem 8rem;
    --info3-xl-padding: 2rem 10rem;
    
    --info3-bg:rgb(23, 20, 27,0.8);
    --info3-color: white;
    --info3-border-radius: 0rem;
    --info3-box-shadow:  inset 0 0 0 7px var(
    --secondary-color), inset 0 0 0 8px var(--primary-border), inset 0 0 0 12px var(--secondary-color), inset 0 0 0 16px var(--secondary-color), inset 0 0 0 20px var(--secondary-color), inset 0 0 0 20px var(--secondary-color), inset 0 0 0 20px var(--secondary-color);
    
    /* info 3 btn*/ 
    --info3-btn-border-radius: 0;
    --info3-btn-padding: .75rem 3rem;
    --info3-btn-width:100%;
    --info3-btn-bg: var(
    --primary-color);
    --info3-btn-hover-bg: var(
    --secondary-hover-color);
}
/*********************
info 1 
**********************/
.bs-info{
        padding:2rem;
        background: var(--info-bg, var(--primary-color));
        color: var(--info-color, var(--primary-contrast));
        border-radius: var(--info-border-radius, var(--default-border-radius));
        text-align:center;
    }



.info-grid{
    display:grid;   
}
/*******************
info 2 
*******************/
.info-2{
    --img-square-fit:cover;
    --margin-section: 4rem;
    grid-template-row: 1fr 200px;
}
.info-grid__info{
   
    z-index:10;
    text-align:center;
    
    

}
.info-2 .info-grid__info{
    background:var(--info2-bg,var(--element-bg));
    color:var(--info2-color);
    box-shadow: var(--info2-box-shadow);
    padding:calc(var(--margin-section, 4rem)/4);
    
    
    max-width:var(--info2-width, 420px);
    margin:0 calc(var(--margin-section, 4rem)/4);
    border-radius:var(--info2-border-radius, 0);
    align-self:end;
    justify-self:center;
    grid-row:2/3;
    grid-column:1/-1;
}
.info-2 .info-grid__image1{
    --aspect-ratio: 5/4;
    z-index:5;
    width: calc(40% + var(--margin-section, 4rem));
    grid-row:1/2;
    grid-column:1/-1;
    align-self:center;
    justify-self:start;
    margin: var(--margin-section,4rem) calc(var(--margin-section,4rem) * -1) calc(var(--margin-section,4rem) * -1) 0;
}
.info-2 .info-grid__image2{
    width:60%;
    --aspect-ratio: 4/5;
    grid-row:1/2;
    grid-column:1/-1;
    align-self:start;
    justify-self:end;
}
.info-2 .btn{
    --btn-padding: var(--info2-btn-padding);
    --btn-border-radius: var(--info2-btn-border-radius, inherit);
    width:var(--info2-btn-width, auto);
}

.info-grid__title{
    font-size:2rem;
}


.info-2 .info-grid__title{
    font-weight:var(--info2-title-weight, var(--font-bold));
    
}
.info-grid__title::after{
    margin:.5rem auto 2rem;
    content:"";
    background: var(--info2-title-decoration, var(--primary-color));
    height:2px;
    width:100%;
    max-width:100px;
    display:block
}

/* info 3 */ 
.info-3{
    --margin-section: 4rem;
    grid-template-columns:1fr;
    align-items:center;
    justify-items:center;
    margin-bottom:1rem;
}
.info-3 .info-grid__info{
    max-width:  var(--info3-width);
    padding:    var(--info3-padding);;
    background: var(--info3-bg);
    color: var(--info3-color);
    border-radius:var(--info3-border-radius, 0);
    box-shadow: var(--info3-box-shadow);
    grid-column: 1/-1;
    grid-row: 1/-1;
    margin:1rem;
    
}
.info-3 .btn{
    --btn-padding: var(--info3-btn-padding);
    --btn-border-radius: var(--info3-btn-border-radius);
    background: var(--info3-btn-bg);
    width:var(--info3-btn-width, auto);
    --btn-border:0 none;
}
.info-3 .btn:hover{
    background: var(--info3-btn-hover-bg);
}

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


@media screen and (min-width:576px){
    /* INFO 3 */
    .info-3 .info-grid__info{
        max-width:  var(--info3-sm-width, var(--info3-width));
        padding:    var(--info3-sm-padding, var(--info3-padding));;
    }
}






@media screen and (min-width:768px){
    /*********
    Info 2
    **********/
    .info-2{
        grid-template-rows: 1fr;
    }
    .info-2 .info-grid__info{
        margin:0 calc(var(--margin-section,4rem)/2);
        padding:calc(var(--margin-section,4rem)/2);
        align-self:start;
        justify-self:center;
        grid-row:1/-1;
        grid-column:1/-1;
        width:50%;
    }
    .info-2 .info-grid__image1{
        --aspect-ratio: 5/4;
        z-index:5;
        width: calc(40% + var(--margin-section,4rem));
        grid-row:1/-1;
        grid-column:1/-1;
        align-self:center;
        justify-self:start;
        margin: var(--margin-section,4rem) calc(var(--margin-section,4rem) * -1) var(--margin-section,4rem) 0;
    }
    .info-2 .info-grid__image2{
        width:60%;
        --aspect-ratio: 4/5;
        grid-row:1/-1;
        grid-column:1/-1;
        align-self:end;
        justify-self:end;
    }
    /***********
    Info 3
    ************/
    .info-3 .info-grid__info{
        max-width:  var(--info3-md-width, var(--info3-sm-width, var(--info3-width)));
        padding:    var(--info3-md-padding, var(--info3-sm-padding, var(--info3-padding)));;
    }
}
@media screen and (min-width:992px){
    /* INFO 3 */
    .info-3 .info-grid__info{
        max-width:  var(--info3-lg-width,var(--info3-md-width, var(--info3-sm-width, var(--info3-width))));
        padding:    var(--info3-lg-padding,var(--info3-md-padding, var(--info3-sm-padding, var(--info3-padding))));
    }
}
@media screen and (min-width:1200px){
    /* INFO 3 */
    .info-3 .info-grid__info{
        max-width:  var(--info3-xl-width, var(--info3-lg-width,var(--info3-md-width, var(--info3-sm-width, var(--info3-width)))));
        padding:    var(--info3-xl-padding, var(--info3-lg-padding,var(--info3-md-padding, var(--info3-sm-padding, var(--info3-padding)))));;
    }
}