

.advantage-left{
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-image: url("/assets/img/automatization-advantage.jpg");
    aspect-ratio: 582 / 336;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 30px;
    >div{
        width: calc(50% - 15px);
        box-shadow: 0 0 0 30px var(--clr-gr-lt);
        border-radius: 16px;
        aspect-ratio: 1;
        &:first-child, &:last-child{
            width: auto;
            margin-bottom: auto;
            background-color: var(--clr-gr-lt);
            aspect-ratio: none;
            flex-grow: 1;
            flex-shrink: 1;
            border-radius: 0;
        }
    }
}

.solution-right{
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-image: url("/assets/img/automatization-solution.png");
    aspect-ratio: 582 / 582;

    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 30px;
    >div{
        width: 480px;
        box-shadow: 0 0 0 30px #FFF;
        border-radius: 16px;
        aspect-ratio: 480 / 276;
        &:first-child, &:last-child{
            width: auto;
            margin-left: auto;
            background-color: #FFF;
            aspect-ratio: none;
            flex-grow: 1;
            flex-shrink: 1;
            border-radius: 0;
        }
    }
}

[id]{
    position: static;
    margin-block: -80px 80px;
}


@media screen and (max-width: 1240px){
    .advantage-left{
        height: 70%;
    }
    .solution-right{
        height: 70%;
        div{width: 80%};
    }
}


@media screen and (max-width: 1024px){
    .solution{
        flex-direction: column-reverse;
    }
    .solution-right{
        width: 100%;
        >div{
            width: 85%;
            box-shadow: 0 0 0 30px #FFF;
            border-radius: 16px;
            aspect-ratio: 480 / 276;
            &:first-child, &:last-child{
                width: auto;
                margin-left: auto;
                background-color: #FFF;
                aspect-ratio: none;
                flex-grow: 1;
                flex-shrink: 1;
                border-radius: 0;
            }
        }
    }
}