:root {
   /* --container-width: 1800px;
    --switcher-offset: 16px;*/
    --ease-quart: cubic-bezier(.165, .84, .44, 1);
   /* --ease-cubic: cubic-bezier(.785, .135, .15, .86);
    --ease-inout-quart:cubic-bezier(.76, 0, .24, 1)*/
}

.photo-card.componente-card a.componente-card{
    border-radius:8px;
    -webkit-box-shadow:0 16px 12px rgba(0,0,0,.15),0 26px 52px rgba(0,0,0,.2);
    box-shadow:0 16px 12px #00000026,0 26px 52px #0003;
    cursor:-webkit-zoom-in;
    cursor:zoom-in;
    display:block;
    overflow:hidden;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-transition:-webkit-transform .7s var(--ease-quart);
    transition:-webkit-transform .7s var(--ease-quart);
    -o-transition:transform .7s var(--ease-quart);
    transition:transform .7s var(--ease-quart);
    transition:transform .7s var(--ease-quart),-webkit-transform .7s var(--ease-quart);
    will-change:transform
}
.photo-card.componente-card picture{
    background:#633185;
    height:100%;
    width:100%
}
.photo-card.componente-card picture img{
    display:block;
    height:calc(100% + 2px);
    -o-object-fit:cover;
    object-fit:cover;
    -webkit-transition:opacity .7s var(--ease-quart);
    -o-transition:opacity .7s var(--ease-quart);
    transition:opacity .7s var(--ease-quart);
    width:calc(100% + 2px)
}
.photo-card__info.componente-card.componente-card{
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    bottom:16px;
    color:#fef6ef;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    font-size:max(.429rem,min(1.5vw,.5rem));
    left:20px;
    pointer-events:none;
    position:absolute;
    right:20px;
    z-index:2
}
@media (min-width:768px){
    .photo-card__info.componente-card.componente-card{
        font-size:max(.429rem,min(1.2vw,.5rem))
    }
}
.photo-card__info.componente-card picture{
    border-radius:100%;
    height:20px;
    margin-right:12px;
    overflow:hidden;
    width:20px
}
@media (min-width:768px){
    .photo-card__info.componente-card picture{
        height:24px;
        margin-right:16px;
        width:24px
    }
}
.photo-card__info.componente-card picture img{
    display:block;
    height:100%;
    width:100%
}
.photo-card__info.componente-card p{
    line-height:1.4;
    max-width:min(80%,300px)
}


.photo-card__info.componente-card>*{
    opacity:0;
    -webkit-transform:translate3d(0,8px,0);
    transform:translate3d(0,8px,0);
    -webkit-transition:opacity .7s var(--ease-quart),-webkit-transform .8s var(--ease-quart);
    transition:opacity .7s var(--ease-quart),-webkit-transform .8s var(--ease-quart);
    -o-transition:opacity .7s var(--ease-quart),transform .8s var(--ease-quart);
    transition:opacity .7s var(--ease-quart),transform .8s var(--ease-quart);
    transition:opacity .7s var(--ease-quart),transform .8s var(--ease-quart),-webkit-transform .8s var(--ease-quart)
}
@media (min-width:992px){
    .photo-card__info.componente-card>*{
        -webkit-transform:translate3d(0,8px,0);
        transform:translate3d(0,8px,0)
    }
}
.photo-card.componente-card a.componente-card:after{
    /*background:-webkit-gradient(linear,left top,left bottom,from(rgba(223, 234, 255,0)),to(#00266B));
    background:-o-linear-gradient(top,rgba(223, 234, 255,0) 0,#00266B 100%);
    background:linear-gradient(180deg,rgba(223, 234, 255,0),#00266B);*/
    bottom:0;
    content:"";
    display:block;
    height:50%;
    left:0;
    opacity:0;
    pointer-events:none;
    position:absolute;
    -webkit-transition:opacity .8s var(--ease-quart);
    -o-transition:opacity .8s var(--ease-quart);
    transition:opacity .8s var(--ease-quart);
    width:100%;
    z-index:1
}
@media (hover:hover){
    .photo-card.componente-card a.componente-card:hover{
        -webkit-transform:scale(1.0375) rotate(2deg) translateZ(0);
        transform:scale(1.0375) rotate(2deg) translateZ(0)
    }
    .photo-card.componente-card a.componente-card:hover .photo-card__info *{
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
    .photo-card.componente-card a.componente-card:hover .photo-card__info picture{
        -webkit-transition-delay:.1s;
        -o-transition-delay:.1s;
        transition-delay:.1s
    }
    .photo-card.componente-card a.componente-card:hover .photo-card__info p{
        -webkit-transition-delay:.18s;
        -o-transition-delay:.18s;
        transition-delay:.18s
    }
    .photo-card.componente-card a.componente-card:hover:after{
        opacity:1
    }
}
.collage.componente-collage{
    display:grid;
    grid-template-columns:repeat(16,1fr);
    grid-template-rows:repeat(3,1fr);
    height:110vw;
    margin:0 -14vw
}
@media (min-width:768px){
    .collage.componente-collage{
        grid-template-columns:repeat(32,1fr);
        grid-template-rows:repeat(2,1fr);
        height:max(400px,min(40vw,800px));
        margin:0 -140px
    }
}
.collage.componente-collage .photo-card{
    --rotation:0deg;
    display:block;
    grid-column-end:span 8;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    position:relative
}
@media (min-width:768px){
    .collage.componente-collage .photo-card{
        height:max(156px,min(18vw,400px))
    }
}
.collage.componente-collage .photo-card>*{
    -webkit-transform:rotate(var(--rotation)) translateZ(0);
    transform:rotate(var(--rotation)) translateZ(0)
}
.collage.componente-collage .photo-card:first-child{
    --rotation:-10.5deg;
    grid-column-start:2;
    grid-row:1;
    z-index:5
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:first-child{
        top:max(24px,min(8vw,128px));
        z-index:10
    }
}
.collage.componente-collage .photo-card:nth-child(2){
    --rotation:3deg;
    grid-column-start:1;
    grid-row:2;
    left:-20vw;
    margin-top:-10vw;
    z-index:3
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(2){
        grid-column-start:7;
        grid-row:1;
        left:0;
        margin-top:0;
        top:max(16px,min(3vw,48px));
        z-index:7
    }
}
.collage.componente-collage .photo-card:nth-child(3){
    grid-column-start:5;
    grid-row:2;
    margin-top:-12vw;
    z-index:4
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(3){
        grid-column-start:13;
        grid-row:1;
        margin-top:0;
        z-index:6
    }
}
.collage.componente-collage .photo-card:nth-child(4){
    --rotation:-3deg;
    grid-column-start:8;
    grid-row:2;
    left:20vw;
    margin-top:-7vw;
    z-index:3
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(4){
        grid-column-start:19;
        grid-row:1;
        left:0;
        margin-top:0;
        top:max(16px,min(3vw,48px));
        z-index:2
    }
}
.collage.componente-collage .photo-card:nth-child(5){
    --rotation:10.5deg;
    grid-column-start:8;
    grid-row:1;
    z-index:6
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(5){
        grid-column-start:24;
        top:max(24px,min(8vw,128px));
        z-index:1
    }
}
.collage.componente-collage .photo-card:nth-child(6){
    --rotation:-5.5deg;
    display:none
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(6){
        display:block;
        grid-column-start:2;
        grid-row:2;
        top:max(24px,min(5.5vw,88px));
        z-index:9
    }
}
.collage.componente-collage .photo-card:nth-child(7){
    --rotation:-8deg;
    display:none
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(7){
        display:block;
        grid-column-start:7;
        grid-row:2;
        z-index:8
    }
}
.collage.componente-collage .photo-card:nth-child(8){
    --rotation:8deg;
    grid-column-start:2;
    grid-row:3;
    margin-top:-16vw;
    z-index:2
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(8){
        grid-column-start:14;
        grid-row:2;
        margin-top:0;
        top:calc(max(20px,min(3vw,48px))*-1);
        z-index:5
    }
}
.collage.componente-collage .photo-card:nth-child(9){
    --rotation:-2deg;
    grid-column-start:8;
    grid-row:3;
    margin-top:-16vw;
    z-index:1
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(9){
        --rotation:2deg;
        grid-column-start:19;
        grid-row:2;
        margin-top:0;
        top:calc(max(20px,min(3vw,48px))*-1);
        z-index:4
    }
}
.collage.componente-collage .photo-card:nth-child(10){
    --rotation:8deg;
    display:none
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(10){
        display:block;
        grid-column-start:24;
        grid-row:2;
        z-index:3
    }
}
/*.collage.componente-collage .photo-card:nth-child(11){
    --rotation:5.5deg;
    display:none
}
@media (min-width:768px){
    .collage.componente-collage .photo-card:nth-child(11){
        display:block;
        grid-column-start:25;
        grid-row:2;
        margin-right:0;
        top:max(24px,min(5.5vw,88px));
        z-index:2
    }
}*/
.collage.componente-collage .photo-card:hover{
    z-index:13
}
.collage.componente-collage .is-hovered img{
    opacity:1!important
}
.collage.is-hovering.componente-collage .photo-card img{
    opacity:.5
}



.landing__photos.componente-fotos.componente-fotos{
    margin:calc(-80px - 1vw) 0 80px;
    max-width:2000px;
    position:relative;
    width:100%
}
@media (min-width:768px){
    .landing__photos.componente-fotos.componente-fotos{
        margin: calc(max(300px,min(20vw,500px))*-1) auto max(64px,min(6.5vw,128px));
    }
}