html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.6rem;
  background-color: hsl(214, 17%, 92%);
  line-height: 1.3;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img {
  width: 100%;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.box__purple {
  background-color: hsl(263, 55%, 52%);
}

.box__gray {
  background-color: hsl(217, 19%, 35%);
}

.box__black {
  background-color: hsl(0, 0%, 7%);
}

.box__white--small {
  background-color: white;
}

.box__white--big {
  background-color: white;
}

.grid {
  box-shadow: 18px 18px 18px hsl(0, 0%, 81%);
}

@media (min-width: 768px) {
  .container {
    padding: 3rem;
    margin: 0 auto;
  }
  .grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-column: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 30px;
  }
  .box__purple {
    grid-column: 1/13;
    grid-row: 1/2;
  }
  .box__gray {
    grid-column: 1/7;
    grid-row: 2/3;
  }
  .box__white--small {
    grid-column: 7/13;
    grid-row: 2/3;
  }
  .box__black {
    grid-column: 1/13;
    grid-row: 3/4;
  }
  .box__white--big {
    grid-column: 1/13;
    grid-row: 4/5;
  }
}
@media (min-width: 961px) {
  .container {
    max-width: 1440px;
  }
  .box__purple {
    grid-column: 1/7;
  }
  .box__gray {
    grid-row: 1/2;
    grid-column: 7/10;
  }
  .box__black {
    grid-column: 4/10;
    grid-row: 2/3;
  }
  .box__white--small {
    grid-column: 1/4;
    grid-row: 2/3;
  }
  .box__white--big {
    grid-column: 10/13;
    grid-row: 1/3;
  }
}
/*



//===============

//font-stack

//==============


$font-family: "Barlow Semi Condensed", sans-serif;




//=================

// font-weight

//==================


$font-weight-light : 300;
$font-weight-medium : 400;
$font-weight-bold : 500;
$font-weight-bold : 600;
$font-weight-bold : 700;
$font-weight-bold : 800;
$font-weight-ultra-bold : 900;  


//=====================

// descriptive color

//=====================


 $color-white: hsl(0, 0%, 100%);
 $color-gray-100: hsl(214, 17%, 92%);
  $color-gray-200: hsl(0, 0%, 81%);
  $color-gray-400: hsl(224, 10%, 45%);
  $color-gray-500: hsl(217, 19%, 35%);
  $color-blue: hsl(219, 29%, 14%);
  $color-black: hsl(0, 0%, 7%);

$color-purple-50: hsl(260, 100%, 95%);
$color-purple-300: hsl(264, 82%, 80%);
$color-purple-500: hsl(263, 55%, 52%);
//====================

// usage color

//===================








//===========================

// font-size  desktop

//===========================


$font-size--sm : 1.3rem;  // button  and navlink    footer-li-link footer-list header
$font-size--md  : 1.6rem;  // paragraph
$font-size--lg  : 2.8rem;  // card header
$font-size--xlg  : 3.8rem; // breadcrumb  header 
$font-size--xxlg : 5.2rem;  // hero header  / card section header

@media (max-width: 768){
    $font-size--xxlg : 4.8rem;
}



$fs-nav-link : $font-size--sm;
$fs-btn      : $font-size--sm;
$fs-p        : $font-size--md;
$fs-sec-header : $font-size--xxlg;
$fs-hero-header : $font-size--xxlg;
$font-size-breadcrumb : $font-size--xlg;



*/
.img {
  width: 40px;
  border-radius: 50%;
}

.title__name {
  font-size: 1.6rem;
}
.title__name--purple {
  color: white;
}
.title__name--white--small, .title__name--white--big {
  color: hsl(217, 19%, 35%);
}
.title__name--gray {
  color: white;
}
.title__main {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
.title__main--purple, .title__main--gray {
  color: white;
}

.text__job-title {
  font-size: 1.3rem;
}
.text__job-title--purple {
  color: gray;
}
.text__job-title--gray {
  color: white;
}
.text__main {
  font-size: 1.3rem;
}
.text__main--purple, .text__main--gray {
  color: white;
}
.box {
  padding: 2rem;
  border-radius: 15px;
}
.box__profile {
  display: flex;
  align-items: center;
  padding: 0;
  height: 100px;
}
.box__gray, .box__white--small, .box__purple, .box__black, .box__white--big {
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .box__gray, .box__white--small, .box__purple, .box__black, .box__white--big {
    margin-bottom: 0;
  }
}