

.advantage-left{
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-image: url("/assets/img/sites-features.jpg");
    aspect-ratio: 582 / 336;
    align-self: center;
    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/sites-functions.jpg");
    aspect-ratio: 582 / 336;
    align-self: center;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    gap: 30px;
    >div{
        width: calc(50% - 15px);
        box-shadow: 0 0 0 30px #FFF;
        border-radius: 16px;
        aspect-ratio: 1;
        &:first-child, &:last-child{
            width: auto;
            margin-bottom: 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: 1024px){
    .solution-right{
        order: -1;
    }
}