*{margin: 0px; padding: 0px;outline: none;text-decoration: none;list-style: none; box-sizing: border-box;}
:root{
    --c-black:rgb(000,000,000);
    --c-darkBlue:rgb(25, 32, 45);
    --c-white:rgb(255,255,255);
    --c-grey-100:rgb(231, 234, 238);
    --c-grey-200:rgb(207, 207, 207);
    --c-grey-400:rgb(103, 109, 126);
    --c-grey-500:rgb(72, 85, 106);
    --c-purple-50:rgb(237, 228, 255);
    --c-purple-300:rgb(167, 117, 241);
    --c-purple-500:rgb(115, 63, 200);
    /* color of background */
    --c-background:rgb(246, 245, 246);
}
/* start main */
body{max-width: 1440px;margin: 0px auto;min-height: 100vh;background-color: var(--c-background);display: flex;} 
body main.wrapper{max-width: 375px;margin:auto;}
body main.wrapper .container{margin: 73px 35px;display: grid;grid-template-columns:1fr;gap: 32px;}
body main.wrapper .container section.section{ padding: 32px;border-radius: 8px;box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
body main.wrapper .container section.section-1{background-color:var(--c-purple-500) ;}
body main.wrapper .container section.section-2{background-color:var(--c-grey-500);}
body main.wrapper .container section.section-3{background-color:var(--c-white);}
body main.wrapper .container section.section-4{background-color:var(--c-darkBlue);}
body main.wrapper .container section.section-5{background-color:var(--c-white);}
    /* start profile */
body main.wrapper .container section .profile{display: flex; align-items: center; gap: 17px;}
body main.wrapper .container section .profile .avatar{width: 28px;height: 28px;border-radius: 50%;}
body main.wrapper .container section .profile .avatar img{width: 100%;height: 100%;object-fit: cover;}
        /* start title person */
body main.wrapper .container section .profile .title-person{display: flex; flex-direction: column;gap: 4px;}
body main.wrapper .container section .profile .title-person h1.personName{font-size: 13px;font-weight: 500;font-family: 'Barlow Semi Condensed', sans-serif;}
body main.wrapper .container section .profile .title-person span.personTitle{font-size: 11px;font-weight: 500;font-family: 'Barlow Semi Condensed', sans-serif;}
body main.wrapper .container section.section h2.description-person{font-size: 20px; font-weight: 600;line-height: 120%;font-family: 'Barlow Semi Condensed', sans-serif;margin-block: 16px;}
body main.wrapper .container section.section p.experience-person{font-size: 13px; font-weight: 500;line-height: 140%;font-family: 'Barlow Semi Condensed', sans-serif;}
            /* start color for sections */
body main.wrapper .container :is(section.section-1, section.section-2) :is(.profile .title-person h1.personName, h2.description-person){color:var(--c-white);}
body main.wrapper .container section.section-1 :is(.profile .title-person span.personTitle, p.experience-person){color:var(--c-purple-50);}
body main.wrapper .container section.section-2 .profile .title-person span.personTitle{color:var(--c-grey-200);}
body main.wrapper .container section.section-2 p.experience-person{color:var(--c-grey-100);}
body main.wrapper .container section.section-3 :is(.profile .title-person h1.personName, h2.description-person){color:var(--c-grey-400);}
body main.wrapper .container section.section-3 :is(.profile .title-person span.personTitle, p.experience-person){color:var(--c-grey-500);}
body main.wrapper .container section.section-4 :is(.title-person h1.personName, .title-person span.personTitle){color:var(--c-white);}
body main.wrapper .container section.section-4 h2.description-person{color:var(--c-grey-200);}
body main.wrapper .container section.section-4 p.experience-person{color:var(--c-grey-100);}
body main.wrapper .container section.section-5 :is(.title-person h1.personName, h2.description-person){color:var(--c-grey-500);}
body main.wrapper .container section.section-5 .profile .title-person span.personTitle{color:var(--c-grey-200);}
body main.wrapper .container section.section-5 p.experience-person{color:var(--c-grey-400);}

@media (min-width: 768px) {
    body main.wrapper{min-width: 647px;}
    body main.wrapper .container{grid-template-columns: 1fr 1fr;}
    body main.wrapper .container :is(section.section-1, section.section-4, section.section-5){grid-column: 1/3;}
}
@media (min-width: 1440px) {
    body main.wrapper{min-width: 1114px;}
    body main.wrapper .container{grid-template-columns: 1fr 1fr 1fr 1fr;gap:24px 32px;}
    body main.wrapper .container section.section-1{grid-column: 1/3;grid-row: 1/2;}
    body main.wrapper .container section.section-2{grid-column: 3/4;grid-row: 1/2;}
    body main.wrapper .container section.section-3{grid-column: 1/2;grid-row: 2/3;}
    body main.wrapper .container section.section-4{grid-column: 2/4;grid-row: 2/3;}
    body main.wrapper .container section.section-5{grid-column: 4/5;grid-row: 1/3;}
}