.portfolio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.portfolio__item {
    padding: 10px 10px 20px;
    background: #0A0A23;
    border: 1px solid #2C2C4A;
}
.portfolio__img img {
    margin-bottom: 10px;
    aspect-ratio: 3 / 2;
    height: auto;
    width: 100%;
}
.portfolio__caption {
    color: var(--color-white);
}

.cases .section *:not(.section__bg) {
    z-index: 2;
    position: relative;
}

.cases .section__bg {
    background-image: url(/public/portfolio/bg-cases.png);
}

.section.section_portfolio {
    padding: 180px 0px 60px;
    position: relative;
    margin: -200px 0px -60px;
}

.section.section_portfolio .section__bg {
    top: -30px;
    left: -380px;
}

@media (max-width: 1350px) {
    .cases .section__bg {
        left: -100px !important;
    }
}

@media (max-width: 900px) {
    .portfolio {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 690px) {
    .portfolio {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio__caption {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .portfolio {
        grid-template-columns: repeat(1, 1fr);
    }
}