/*---- box sizing ----*/
*,
*::before,
*::after{
    box-sizing: border-box;}

/*---- reset marigns ----*/
html {
    font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}


body,
h1,
h2,
h3,
h4,
h5,
figure,
picture {
    margin: 0;
} 

:is( h1,
h2,
h3,
h4,
h5,
figure,
picture){
    max-inline-size: initial;
    block-size: auto;
    margin-block-start: 0.215rem;

}

/*---------make image easier to work with-----*/
img,
picture {
    max-inline-size: 100%;
    block-size: auto;
    max-width: 100%;
    display: block;
}

 /************************************* */
        /*    Customer properties   */
/**************************************/
  
   :root {

        /*     Primary   */

--p-50: 260, 100%, 95%;
--p-300: 264, 82%, 80%;
--p-500: 263, 55%, 52%;

            /*   Neutral  */

--White: 0, 0%, 100%;
--Grey-100: 214, 17%, 92%;
--Grey-200: 0, 0%, 81%;
--Grey-400: 224, 10%, 45%;
--Grey-500: 217, 19%, 35%;
--Dark-blue: 219, 29%, 14%;
--Black: 0, 0%, 7%;


/*  Text colors */

--text-200: 0, 0%, 81%;




/*  Typograph body font   */
--padding-1: 1.997rem;
--border-radius: 1.5vw;

/*  font weight */
--gap-1: 1rem;
--fw-100: 100;
--fw-200: 200;
--fw-300: 300;
--fw-400: 300;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--fw-800: 800;
--fw-900: 900;

/*  font size */

    --Font-size: 0.8125rem;
    --ff-family: "Barlow Semi Condensed", sans-serif;
   }



.a{grid-area: daniel;}
.b{grid-area: jonathan;}
.c{grid-area: patric;}
.d{grid-area: jeanette;}
.e{grid-area: kira;}

   main {
    display: grid;
    gap: 1rem;
    height: fit-content;
   grid-auto-columns: 1fr;
    grid-template-areas: 
        "daniel"
        "jonathan"
         "jeanette"
        "patric"
        "kira"
         ;
}

body {
    line-height: 1.4;
    font-family: var(--ff-family);
    padding-inline: 3rem;
    padding-block-start: 9rem;
     height: auto;

}


.flex { display: flex;
    align-items: center;}
.user { margin-inline-start: 0.915rem;}
.user > p { margin-block: 0px; }


@media (width >= 1024px) {
       main {
        display: grid;
          grid-auto-columns: 1fr;
        grid-template-areas: 
        "daniel daniel"
        "jonathan kira"
        "patric  jeanette"
         ;
       }
}

@media (width >= 1440px) {
       main {     
        display: grid;
          grid-auto-columns: 1fr;
        grid-template-areas: 
        "daniel daniel jonathan kira"
        "patric  jeanette jeanette kira"
         ;
       }


}



                                  /************************************* */
                                        /*       Utility classes   */
                                        /**************************************/
.top{
    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: 85% 2rem;
}






 /*     backgrgound colors Primary   */
.bg-purple { background-color: hsl(var(--p-500)); }

.bg-100-grey { background-color: hsl(var(--Grey-100));}
.bg-200-grey { background-color: hsl(var(--Grey-200)); }
.bg-400-grey { background-color: hsl(var(--Grey-400));}
.bg-500-grey { background-color: hsl(var(--Grey-500));}

.bg-white { background-color: hsl(var(--White));}

.bg-blue { background-color: hsl(var(--Dark-blue)); }

.shadow { -webkit-box-shadow: 0.1rem 5px 10px 5px hsl(var(--Grey-200), .1); 
box-shadow: 0.1rem 5px 10px 5px hsl(var(--Grey-200));
}



 /*     Text colors   */
 .text {color: hsl(var(--text-200));}
 .white { color: hsl(var(--White));}
 .grey-100 { color: hsl(var(--Grey-100));}
 .grey-200 { color: hsl(var(--Grey-200));}
 .grey-400 { color: hsl(var(--Grey-400));}
 .grey-500 { color: hsl(var(--Grey-500));}
 .dark-blue {color: hsl(var(--Dark-blue));}
 .black { color: hsl(var(--Black)); }

 /*    Font-weight  */
 .fw-100 { font-weight: 100;}
 .fw-200 { font-weight: 200;}
 .fw-300 { font-weight: 300;}
 .fw-400 { font-weight: 400;}
 .fw-500 { font-weight: 500;}
 .fw-600 { font-weight: 600;}
 .fw-700 { font-weight: 700;}
 .fw-800 { font-weight: 800;}
 .fw-900 { font-weight: 900;}





          /*    Font-family  */
 .ff-family {font-family: var(--ff-family);}

.size { font-size: var(--Font-size); }  
.gap { gap: var(--gap-1);} 
.padding { padding: var(--padding-1); } 
.border-radius { border-radius: var(--border-radius); }