.testimonials {
    margin-bottom: 150px;
}

section.testimonial__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    width: 95%;
    gap: 1.5rem;
    max-width: 1280px;
    margin: auto;
    grid-template-areas:
        "testimonial__item1 testimonial__item1 testimonial__item2 testimonial__item3"
        "testimonial__item4 testimonial__item5 testimonial__item5 testimonial__item3";
}

.testimonial__item {
    border-radius: 25px;
    padding: 1.5rem;
    display: grid;
    grid-template-areas:
        "img testimonial__name"
        "testimonial__title testimonial__title"
        "testimonial__description testimonial__description";
    grid-template-columns: 50px 1fr;
    row-gap: 1.5rem;
    align-content: start;
}

.testimonial__title {
    font-weight: 600;
    font-size: 20px;
    grid-area: testimonial__title;
    margin-bottom: 1rem;
}

.testimonial__description {
    font-size: 18px;
    word-spacing: 0.5rem;
    grid-area: testimonial__description;
    margin-bottom: 1rem;
    font-weight: 600;
}

.testimonial__item1 {
    background-color: #be1d37;
    background-image: url(https://i.ibb.co/wNRBz1D/quotation.png);
    background-position: top 10% right 5%;
    background-size: 50px;
    background-repeat: no-repeat;
    color: #ffffff;
    grid-area: testimonial__item1;
}

.testimonial__item2 {
    background-color: #efefef;
    color: #2e2e2e;
    grid-area: testimonial__item2;
}

.testimonial__item3 {
    background-color: #efefef;
    color: #2e2e2e;
    grid-area: testimonial__item3;
}

.testimonial__item4 {
    background-color: #efefef;
    color: #2e2e2e;
    grid-area: testimonial__item4;
}

.testimonial__item5 {
    background-color: #003974;
    color: white;
    grid-area: testimonial__item5;
}


@media (max-width: 991px) {
    section.testimonial__container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-template-areas:
            "testimonial__item1 testimonial__item1 testimonial__item2"
            "testimonial__item4 testimonial__item5 testimonial__item5"
            "testimonial__item3 testimonial__item3 testimonial__item3";
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    section.testimonial__container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        grid-template-areas:
            "testimonial__item1"
            "testimonial__item2"
            "testimonial__item3"
            "testimonial__item4"
            "testimonial__item5";
        gap: 1.5rem;
    }
}