@charset "utf-8";

/*==================================================
HOME
==================================================*/

#home{margin-block-end:3rem;}

/*==================================================
BANNER
==================================================*/
#outer-banner{background: url('../img/bg-banner-home.png') center top no-repeat; margin-block-start: -118px; min-block-size: 800px; position:relative; text-align:center;}
.banner-background{display: block; margin-block-start: 118px; position: absolute; inset:0; block-size: 538px; z-index: -1;}
.banner-background img{inline-size:100%; block-size:100%; object-fit:cover;}
#banner{position: relative; padding-block-start: 122px;}
#banner h1{max-inline-size:320px; color:#000;}
#banner-heart{position:relative; inset-block-start:-178px; inset-inline-start:280px;}
#since{max-inline-size:324px; opacity: 0.9; margin-block-start: 38px; margin-block-end:14px; padding:20px; border-radius:var(--radius); background:var(--background);}
#seal{position:relative; inset-block-start: -26px; inset-inline-start:216px; z-index:4; inline-size:120px; block-size:120px;}

/*==================================================
HIGHLIGHTS
==================================================*/
#outer-highlight{margin-block-start: -154px; position:relative; text-align:center;}
#highlight-panel{display:grid; grid-template-columns:1fr; gap:16px; position:relative; z-index:3; inline-size:min(1290px,calc(100% - 6px)); margin:-102px auto 0; padding:16px; border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow);}
.highlight-card{display:grid; grid-template-columns:63px 1fr; margin-block-start: 0.83rem; align-items: start; gap:14px; max-inline-size:285px;}
.highlight-card img{inline-size:auto; margin-inline:auto;}
.highlight-card h2{font-size:13px; font-weight:700; text-transform:uppercase;}
.highlight-card p{font-size:13px;}

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

/*==================================================
NOSSOS CÃES
==================================================*/
#our-dogs{}
#our-dogs-heart{position:relative; inset-block-start:-128px; 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:282px; 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:-88px; 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 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);}

/*==================================================
375px
==================================================*/
@media only screen and (min-width:375px){
    #icon-voce{inset-inline-start: 80px; inset-block-start: -293px;}
    #seal{inset-inline-start: 224px;}
    #about-content{block-size: 460px;}
    #about-heart{inset-inline-start: 166px; inset-block-start: -337px;}
    #our-dogs-heart{inset-block-start: -144px; inset-inline-start: 296px;}
}

/*==================================================
390px
==================================================*/
@media only screen and (min-width:390px){
    #seal {inset-inline-start: 234px;}
    #our-dogs-heart{inset-block-start: -76px; inset-inline-start: 296px;}
}

/*==================================================
412px
==================================================*/
@media only screen and (min-width:412px){
    #seal{inset-inline-start: 254px;}
    #icon-voce{inset-block-start: -293px;}
    #about-heart{inset-block-start: -337px;}
    #our-dogs-heart{inset-block-start: -78px;}
}
/*==================================================
430px
==================================================*/
@media only screen and (min-width:430px){
    #seal {inset-inline-start: 268px;}
}

/*==================================================
768px
==================================================*/
@media only screen and (min-width:768px){
    #seal{inset-inline-start: 582px;}
    #outer-highlight{display: flex; margin-block-start: -58px;}
    #highlight-panel{grid-template-columns: repeat(2,1fr); inline-size: fit-content; padding: 36px 86px;}
    #about{display: grid; grid-template-columns: auto 1fr; gap: 22px; background-position: 644px 60px;}
    #photo-frame{padding-block-start: 1rem;}
    #our-dogs{padding-block-start: 0;}
    #our-dogs-heart{inset-block-start: -82px; inset-inline-start: 642px;}
    #our-dog-grid{grid-template-columns: repeat(2,1fr); padding-inline: 108px;}
}

/*==================================================
820px
==================================================*/
@media only screen and (min-width:820px){
    #seal{inset-inline-start:618px;}
    #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){
#seal{inset-inline-start:722px;}
#about{padding-inline:2rem; background-position:808px 140px;}
#our-dog-grid{padding-inline:99px;}
#our-dogs-heart{inset-inline-start:766px;}
}

/*==================================================
1180px
==================================================*/
@media only screen and (min-width:1180px){
    .banner-background{block-size: 512px;}
    #seal{inset-inline-start: 1008px; inset-block-start: -40px;}
    #outer-highlight{margin-block-start: -94px;}
    #highlight-panel{grid-template-columns:repeat(4,1fr); margin-block-start:-76px; padding:22px;}
    #about{padding-inline:76px; background-position:902px 182px;}
    #our-dogs-heart{inset-inline-start:836px;}
    #our-dog-grid{grid-template-columns:repeat(4,1fr); padding-inline:0;}
}

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

/*==================================================
1366px
==================================================*/
@media only screen and (min-width:1366px){
    #since{margin-block-start: -34px;}
    #seal{inset-inline-start: 1111px; inset-block-start: 24px;}
    #our-dogs-heart{inset-inline-start: 923px;}
}