@charset "utf-8";

/*==================================================
NOSSOS CÃES
==================================================*/

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

/*==================================================
NOSSOS CÃES
==================================================*/
#our-dogs{padding-block-start:2rem;}
#our-dogs-heart{position:relative; inset-block-start: -164px; inset-inline-start:286px;}
#our-dog-grid{display:grid; grid-template-columns:1fr; gap:22px; margin-block-start:-38px;}
.our-dog-card{position:relative; inline-size:246px; block-size:369px; margin-inline:auto; border-radius:var(--radius); background:#f2f2f2;}
.our-dog-photo{overflow:hidden; inline-size:246px; block-size:282px; border-radius:var(--radius);}
.our-dog-photo img{inline-size:100%; block-size:100%; object-fit:cover;}
.our-dog-info{position:relative; z-index:3; inset-block-start: -44px; padding:16px 22px; border-end-start-radius:var(--radius); border-end-end-radius:var(--radius); background:var(--white); box-shadow:var(--shadow);}
.our-dog-info h3{margin-block:0 6px;}
.our-dog-info ul li{font-size: 12px;}
.our-dog-info a{font-size:13px;}
.our-dogs-button{display:grid; align-items:center; inline-size:196px; margin-block:28px; margin-inline:auto; box-shadow:var(--shadow);}

/*==================================================
SOBRE O CANIL
==================================================*/
#about{background:url("../img/esferas.png") no-repeat 98px 462px;}
#about-content{block-size: 526px;}
#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: -430px; inset-inline-start: 200px;}
#photo-frame{margin-block-end: 2rem;}
#photo-frame img{border-radius:var(--radius);}

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

/*==================================================
390px
==================================================*/
@media only screen and (min-width:390px){
    #about-heart {inset-block-start: -404px;}
       
    }
    
/*==================================================
430px
==================================================*/
@media only screen and (min-width:430px){
    #our-dogs-heart {inset-block-start: -116px;}
    
    }

/*==================================================
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;}
    #our-dogs{padding-block-start: 0;}
    #our-dogs-heart{inset-inline-start: 566px;}
    #our-dog-grid{grid-template-columns: repeat(2,1fr); padding-inline: 108px;}
}

/*==================================================
820px
==================================================*/
@media only screen and (min-width:820px){
    #our-dog-grid{grid-template-columns:repeat(3,1fr); padding-inline:0;}
    #our-dogs-heart{inset-inline-start:670px;}
}

/*==================================================
1024px
==================================================*/
@media only screen and (min-width:1024px){
    #about{padding-inline: 2rem; background-position: 754px 208px;}
    #our-dog-grid{padding-inline: 99px;}
    #our-dogs-heart{inset-inline-start: 802px;}
}

/*==================================================
1180px
==================================================*/
@media only screen and (min-width:1180px){
    #about{padding-inline:76px; background-position:902px 182px;}
    #our-dog-grid{grid-template-columns: repeat(4, 1fr); padding-inline: 37px;}
}

/*==================================================
1280px
==================================================*/
@media only screen and (min-width:1280px){
    #about{gap:48px; padding-inline:111px; background-position:992px 176px;}
    #our-dogs-heart{inset-inline-start:888px;}
    #our-dog-grid {padding-inline: 82px;}
}

/*==================================================
1366px
==================================================*/
@media only screen and (min-width:1366px){
    #our-dogs-heart{inset-inline-start:923px;}
    #our-dog-grid {padding-inline: 110px;}
}