CSS Grid Design - позиционирование и масштабирование

Question

Я не знаю, правильное ли название, если нет, пожалуйста, помогите мне изменить его.

Хорошо, я хотел повторить это изображение:

Теперь я смог выполнить некоторые части с помощью CSS:

Ниже приведен код CSS, который я сделал для него:

$gradients-list: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%) linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)
 linear-gradient(160deg, #0093E9 0%, #80D0C7 100%) linear-gradient(90deg, #FAD961 0%, #F76B1C 100%) 
 linear-gradient(132deg, #F4D03F 0%, #16A085 100%) linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
 linear-gradient(0deg, #08AEEA 0%, #2AF598 100%) linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%) 
 linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);



$grid-columns: 12;

.testimonials
{
    display: grid;
    grid-gap: 70px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    // overflow: hidden;
    transform: translatex(0%); 
    margin-bottom: 40px;
    // animation: marquesina 40s infinite normal linear 1s;

    &:last-child
    {
        margin-bottom: 0px;
    }

    &.tm-one 
    {
        transform: translateX(-20%);
        .tm-card:nth-child(2),
        .tm-card:nth-child(3)
        {
            opacity: 1;
            .tmc-img,
            .tmc-text
            {
                visibility: visible;
            }
        }
    }
    &.tm-two 
    {
        transform: translateX(-10%);
        .tm-card:nth-child(2),
        .tm-card:nth-child(3)
        {
            opacity: 1;
            .tmc-img,
            .tmc-text
            {
                visibility: visible;
            }
        }
    }

    &.tm-three 
    {
        transform: translateX(-60%);
        .tm-card:nth-child(3),
        .tm-card:nth-child(4)
        {
            opacity: 1;
            .tmc-img,
            .tmc-text
            {
                visibility: visible;
            }
        }
    }
}
.tm-card
{
    width: 370px;
    height: 90px;
    border-radius: 10px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px;
    opacity: 0.1;

    .tmc-img
    {
        width: 60px;
        height: 60px;
        border-radius: 999em;
        // background-color: white;
        background-image: url('../steve.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        visibility: hidden;
    }

    .tmc-text
    {
        visibility: hidden;
        p
        {

            width: 180px;
            // height: 40px;
            font-size: 13px;
            font-family: $bold-font;
            margin-left: 25px;
            color: white;
            margin-bottom: 0px;

            &:nth-child(2)
            {
                font-family: $light-font;
                font-size: 12px;
            }
        }
    }


    @each $current-gradient in $gradients-list{
        $i: index($gradients-list, $current-gradient);
        &:nth-child(#{$i}){
            background-image: nth($gradients-list, $i);
        }
    }
}

@for $i from 1 through $grid-columns {
    .grid-#{$i}
    {
        width: percentage($i / $grid-columns);
    }
}

Каждая строка является сеткой .testimonial с 8 столбцами, и я сделал 3 отдельных строки. Для каждой строки я вручную перевел элементы, используя transform: translateX();, влево и вправо.

Я бы хотел знать, как сохранить постоянство позиций на более широких экранах, скажем, шириной 2500 пикселей.

Идея, которую я задумал, заключалась в том, чтобы написать пользовательскую функцию JavaScript, которая бы повторно калибровала положение строк на экране при изменении размера, но я не уверен, так ли это.

Кто-нибудь сталкивался с этой проблемой раньше. Если это так, пожалуйста, поделитесь своими советами здесь. :)