@charset "utf-8";

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

/*==================================================
NOSSOS CÃES
==================================================*/
#our-dogs{padding-block-start:2rem;}
#our-dogs-heart{position: relative; inset-block-start: -116px; 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: 531px; 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);}
.inf-vitrine-cartao{color: #000; text-align: left;}
.inf-vitrine-pix{color: #000; text-align: left;}
.inf-vitrine-preco{font-weight: bold; font-size: 21px;}
.inf-vitrine-desconto{color: chartreuse; font-size: small;}

/*==================================================
SOBRE O CANIL
==================================================*/
#about{background:url("../img/esferas.png") no-repeat 98px 408px;}
#about-content{block-size: 474px;}
#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: -376px; 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){
    
}

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

/*==================================================
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: 0;}
}

/*==================================================
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;}
}