.sobre {
    padding: 100px 10px;
    position: relative;

    &>img {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.sobre-grid {
    @include flex(60px 190px);
    flex-wrap: wrap-reverse;
    position: relative;
    z-index: 2;

    .sobre-content {
        display: grid;
        gap: 30px;
        max-width: 470px;

        div {
            span {
                @include detail(140px, 1px, $main);
                margin-top: 10px;
            }
        }

        p {
            font-size: rem(20);

            span {
                color: $main;
            }
        }

        @media only screen and (max-width:480px) {
            text-align: center;
            justify-items: center;

            div {
                span {
                    margin: 10px auto 0;
                }
            }
        }
    }

    .sobre-img {
        position: relative;

        img:nth-child(2) {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);

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