*,
*:before,
*:after{
    box-sizing: border-box;
}
:root{
 --Moderate-violet--: hsl(263, 55%, 52%);
 --Very-dark-grayish-blue: hsl(217, 19%, 35%);
 --Very-dark-blackish-blue: hsl(219, 29%, 14%);
 --Light-gray: hsl(0, 0%, 81%);
 --Light-grayish-blue: hsl(210, 46%, 95%)
}
body{
    padding: 0;
    margin: 0;
    background-color: #edf2f8;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Barlow Semi Condensed', sans-serif;
    
}
.box{
    padding: 1.8em;   
    border-radius: 12px;
}
/* container */
.container{
    display: grid;
    max-width: min(95%, 70rem);
    gap: 1.5rem;
    margin-inline: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* images */
.image{
    border-radius: 50%;
}
/* boxes  */
.Daniel{
    background-color: var(--Moderate-violet--);
   grid-column-start: span 2;
   background-image: url(images/bg-pattern-quotation.svg);
   background-repeat: no-repeat;
   background-position: left 21.7rem top 0;
 
}
.Jeanette{
    background-color: hsl(0, 0%, 100%);
    grid-area: 2;
}
.Jonathan{
    background-color: var(--Very-dark-grayish-blue);
}
.Kira{
    background-color: #ffff;
    grid-column: -2;
    grid-row-start: 1;
    grid-row-end: 3;
   
}
.Patrick{
    background: var(--Very-dark-blackish-blue);
   grid-column-start: span 2;
    
}
/* boxes */


.img-daniel, .img-jeanette, .img-jonathan, .img-kira, .img-patrick {
    border: 1px solid white;
    width: 100%;
    max-width: 2rem;
    height: 100%;
}
.line{
    display: flex;
    display:-webkit-flex; 
    flex-flow: wrap;
    -webkit-flex-flow: wrap;
}
li, ul{
   margin: 0 8px;
   padding: 0;
   flex-direction: row;
   list-style: none;
}
h1{
    font-size: 1.2rem;
    font-weight: 600;
}
p {
    font-size: 0.8125rem;
    font-weight: 600;
}
/* texts */
.white-text{
    color: white;
    font-weight: 600;
}
.white-name{
    color: white;
    font-weight: 600;
}
.verified-small-text{
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.name-size{
    font-size:  0.8125rem;
}
.daniel-text-spacing{
    letter-spacing: 0.5px;
    z-index: 2;
    
}
.paragraph-colors{
    color: var(--Light-grayish-blue);
    opacity: 70%;
}
.kira-color, .jeanette-color{
    color: hsl(0, 0%, 70%);
}
.three-guys-verified-color{
    color: var(--Light-gray);
    opacity: 50%;
}
.kira-jean-paragraph-color{
    color: hsl(0, 0%, 56%);
}
/* kira text inside */
.kira-paragraph-text{
    line-height: 1.3;
    overflow-wrap: break-word;
    width: 12rem;
}
@media (min-width: 365px) and (max-width: 1150px){
    .container{
        display: grid;
        grid-template-rows: 0.6fr 0.4fr 0.4fr 0.6fr 0.4fr;
        grid-template-columns: 1fr;
        grid-template-areas: inherit;

    }
    .Daniel{
       grid-area: 1;
    }
    .Jonathan{
        grid-area: 2;
    }
    .Jeanette{
        grid-area: 3;
    }
    .Patrick{
        grid-area: 4;
       overflow-wrap:break-word
        
    }
    .Kira{
        grid-area: 5;
    }
    .kira-paragraph-text{
        line-height: 1.3;
        width: 20rem;
        height: 12rem;
        /* width: min(10rem calc(10rem + 100px)); */
        /* border: 1px solid red; */
        overflow-wrap: break-word;
    }
}