src/css/usecases.css

.innerhero__pic--usecase{
    width: 57rem;
    height: auto;
    top: auto;
    bottom: -23rem;
    transform: none;
    left: 80%;
}
.usecase2 {
    padding: var(--section-spacing-xs) 0;
}
.usecase2__wrap {
    padding-top: 6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows:auto;
    gap: 4rem 3rem;
}

.usecase3 {
    padding-top: 12rem;
    padding-bottom: 6rem;
}
.usecase3__block:not(:last-child){
    padding-bottom: 10rem;
}
.usecase4 {
    padding-top: 10rem;
    padding-bottom: 12rem;
}
.usecase4__wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows:auto;
    gap: 4rem 3rem;
}


@media (max-width:992px){
    .usecase2__wrap,
    .usecase4__wrap{
        grid-template-columns: 1fr 1fr;
    }
}/* END MEDIA 992px */


@media (max-width:767px){
    .usecase2__wrap, .usecase4__wrap{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .usecase2__wrap{
        padding-top: 3rem;
    }
    .usecase3{
        padding-top: 0;
    }
    .usecase3__block:not(:last-child){
        padding-bottom: 8rem;
    }
    .usecase4{
        padding-top: 2rem;
        padding-bottom: 6rem;
    }
}/* END MEDIA 767px */