.report-images { max-width: 540px; width: 100%; display: flex; flex-direction: column; gap: 20px; img { object-fit: cover; border-radius: 10px; } &__main { width: 100%; height: 441px; grid-column: 1 / 5; } &__list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } &__item { height: 102px; } } @media screen and (max-width: 1024px) { .report-images { max-width: 100%; } } @media screen and (max-width: 550px) { .report-images { &__main { height: 162px; grid-column: 1 / 2; } &__list { grid-template-columns: 1fr 1fr; } &__item { width: 100%; height: 162px; } } }