.servicos {
    background: url(/img/servicos-bg.webp) no-repeat center;
    background-size: cover;
    padding: 130px 10px 100px;
    position: relative;

    &>img {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateY(-30%);

        @media only screen and (max-width:430px) {
            display: none;
        }
    }

    &::after {
        position: absolute;
        content: "";
        right: 0;
        top: 20%;
        display: block;
        box-shadow: 0 0 150px 100px #b896647e;
    }

    @media only screen and (max-width:635px) {
        &::after {
            display: none;
        }
    }
}

.servicos-grid {
    display: grid;
    gap: 40px;

    h3 {
        text-align: center;
    }

    .servicos-content {
        @include flex(35px 26px);
        flex-wrap: wrap;

        div {
            max-width: 235px;
            text-align: center;
            display: grid;
            justify-items: center;
            gap: 7px;
            opacity: 0;
            transform: translateY(50px);

            h2 {
                @include font(22, 600);
            }

            p {
                font-size: rem(18);
            }
        }
    }

    &.active {
        .servicos-content {
            div {
                animation: sobe 1.5s forwards;

                @for $i from 2 through 4 {
                    &:nth-child(#{$i}) {
                        animation-delay: calc(.2s * #{$i - 1});
                    }
                }
            }
        }
    }
}