
.service-item {
}
section#servicos .bg-img {
    background-image: url(../../media/services-digital-agency.jpg);
}
.grupo-servicos .gs_img {
    height: 100%;
    padding: 0 var(--md-spacing);
}

.grupo-servicos .gs_img img{
    object-fit:cover;
    height:100%;
}
.gs_portfolio {
    display: grid;
    margin-top: calc(var(--md-spacing) + 3vw);
    grid-template-columns: repeat(6,1fr);
    grid-gap: var(--md-spacing);
}

.gs_portfolio_item {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}
.gs_portfolio_item img{
    object-fit:cover;
    width: 100%;
    height: 100%;
}
.gs_portfolio_item .gs_portfolio_item_label{
    position: absolute;
    width:100%;
    top:100%;
    left:0;
    background: rgba(0,0,0,0.2);
    opacity:0;
    transition: .3s ease all;
    padding: var(--xs-spacing);
}
.gs_portfolio_item:hover .gs_portfolio_item_label{
  opacity:1;
  transform:translateY(-100%);
}
.porque-agencia > div:first-child {
    flex: 2;
}
.porque-agencia{
    align-items:center;
}

.porque-agencia img {
    margin-right: calc((var(--md-spacing) * 2) + 120px);
    margin-top: calc(var(--lg-spacing) * -1);
    margin-left: var(--lg-spacing);
    max-width: 20vw;
}
.porque-agencia > div:last-child{
    margin-top:var(--xl-spacing);
    text-align:center;
    padding: 0 var(--xl-spacing);
}

.grid-item img{
    width:5em;
    margin-bottom:var(--md-spacing);
}
.grid-item h4{
    margin-bottom: var(--xxs-spacing);
}

.img-beneficios-grupo-2 {
    padding: var(--md-spacing);
    text-align: center;
}

.img-beneficios-grupo-2 .img-3 {
    margin-bottom: var(--md-spacing);
}
.img-beneficios-grupo-2 > * img {
  width:clamp(290px,60%,60%);
  height:auto;

}
.img-beneficios-grupo {
    display: flex;
    transform: translateY(calc(var(--md-spacing) * -1));
    height: 100%;
}

.img-beneficios-grupo .img-beneficios {
    padding: var(--md-spacing);
}

.img-beneficios-grupo .img-beneficios img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-beneficios-grupo .img-beneficios.img-1 {
    transform: translateY(var(--lg-spacing));
}
#que-esperar .box-line img{
    width:4em;
    height:4em;
    transform:rotate(0);
}
@media (min-width:425px){
.grid-items {
    display: grid;
    grid-template-columns: repeat(2,1fr);
  grid-gap: var(--xs-spacing);
  }
}
.grid-items{
  margin: var(--lg-spacing) 0;
}

.grid-items .grid-item {
    text-align: center;
    max-width: 23em;
    margin: 0 auto;
}
@media (max-width:374px){
    .grid-items .grid-item {
        display:flex;
        align-items: center;
        margin-bottom:var(--xs-spacing)
    }
    .grid-items .grid-item .grid-item-content{
        text-align:left;
        margin-left:var(--sm-spacing);
    }
}
@media (max-width: 1399px) and (min-width:992px){
    .grupo-servicos .gs_img{
        margin-bottom: var(--lg-spacing);
    }
}
@media (max-width:1399px){
    .gs_portfolio {
        grid-gap:var(--sm-spacing);
    }
    .porque-agencia img{
        margin-right:var(--md-spacing);
    }
}
@media (min-width:1400px){
    .lista_servicos_reg {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        align-items: flex-start;
        grid-gap: 0 var(--sm-spacing);
    }
    
    .lista_servicos_reg .destaque-box {
        align-items: flex-start;
    }
}
@media (max-width:1199px){
    .gs_portfolio {
        grid-template-columns:repeat(3,1fr);
    }
    .porque-agencia img{
        margin-top:0
    }
    .porque-agencia > div:last-child{
        padding:0;
    }
    .gs_portfolio{
      margin-top:var(--sm-spacing);
    }
}
@media (max-width:1199px) and (min-width:992px){
    .grid-items {
        display: block;
    }

    .grid-items .grid-item {
        display: flex;
        padding: 0;
        text-align: left;
        margin: 0;
        max-width: initial;
    }

    .grid-items .grid-item .grid-item-content {
        margin-left: var(--sm-spacing);
    }

}
@media (max-width:991px){
    .grupo-servicos .gs_img {
        padding: 0;
        height: auto;
        margin-bottom: var(--md-spacing);
        min-height: 240px;
    }
    .grupo-servicos .gs_img.gs_img1 {
        padding-right: var(--sm-spacing);
    }
    .porque-agencia img{
        margin-right: 0;
    }
    .gs_portfolio{
      margin-top:var(--xs-spacing);
    }
    .img-beneficios-grupo .img-beneficios {
        padding: var(--xs-spacing);
    }

    .img-beneficios-grupo {
        transform: translate(0);
        padding-bottom: var(--lg-spacing);
        height: 50vh;
        margin: 0 calc(-1 * var(--xs-spacing)) var(--md-spacing);
    }
    .img-beneficios-grupo-2 {
        padding-left: 0;
        padding-right: 0;
        margin-top: var(--md-spacing);
    }

    .img-beneficios-grupo-2 img {
        width: 100%;
    }
}
@media (min-width:1399px){
  .grid-items .grid-item {
    padding: var(--md-spacing);
  }

}
@media (max-width:767px) and (min-width:575px){
    .porque-agencia img{
        margin-right: calc(var(--lg-spacing) * -1);
    }
}
@media (max-width:767px){
    .gs_portfolio {
        grid-template-columns:repeat(2,1fr);
    }

}
@media (max-width:574px){
    .porque-agencia > div:nth-child(2){
        width:100%;
        height: 150px;
        text-align: right;
        background: #f6da31;
    }
    .porque-agencia > div:nth-child(2) img{
        width:100%;
        height:100%;
        object-fit:cover;
        margin-right: 0;
        max-width: 400px;
        margin-left: 0;
        object-position: center;
    }
}
