@charset "utf-8";

/*==================================================
LISTA DE ESPERA
==================================================*/

#o-canil{margin-block-end:3rem;}

/*==================================================
SOBRE O CANIL
==================================================*/
#about{background: url("../img/esferas.png") no-repeat 100px 1660px;}
#about-content{block-size: auto;}
#about-content h2{max-inline-size: 370px;}
#about-content p{max-inline-size: 370px;}
#about-content ul {max-inline-size: 370px;}
#icon-voce{position: relative; inset-block-start: -288px; inset-inline-start: 106px;}
#about-heart{position: relative; inset-block-start: -80px; inset-inline-start: 216px;}
#photo-frame{margin-block-end: 2rem;}
#photo-frame img{border-radius: var(--radius);}


/*==================================================
375px
==================================================*/
@media only screen and (min-width:375px){
    #about {background: url(../img/esferas.png) no-repeat 114px 1586px;}
}
/*==================================================
390px
==================================================*/
@media only screen and (min-width:390px){
    #about {background: url(../img/esferas.png) no-repeat 126px 1530px;}
}

/*==================================================
412px
==================================================*/
@media only screen and (min-width:412px){
       #about {background: url(../img/esferas.png) no-repeat 148px 1530px;}
    }
/*==================================================
430px
==================================================*/
@media only screen and (min-width:430px){
     #about {background: url(../img/esferas.png) no-repeat 162px 1530px;}  
    }

/*==================================================
768px
==================================================*/
@media only screen and (min-width:768px){
    #about{display: grid; grid-template-columns: auto 1fr; gap: 22px; background-position: 510px 226px;}
    #photo-frame{padding-block-start: 1rem;}
    
}

/*==================================================
820px
==================================================*/
@media only screen and (min-width:820px){
    
}

/*==================================================
1024px
==================================================*/
@media only screen and (min-width:1024px){
    #about{padding-inline: 2rem; background-position: 754px 208px;}
    
}

/*==================================================
1180px
==================================================*/
@media only screen and (min-width:1180px){
    #about{padding-inline: 76px; background-position: 902px 182px;}
    
}

/*==================================================
1280px
==================================================*/
@media only screen and (min-width:1280px){
    #about{gap: 48px; padding-inline: 111px; background-position: 992px 176px;}
    
}

/*==================================================
1366px
==================================================*/
@media only screen and (min-width:1366px){
    
}