body {
   font-family: 'Jura';
}

section {
   margin: 50px 100px;
}

@media only screen and (max-width: 800px) {
   section {
      margin: 10px 20px;
      padding-top: 80px;
   }
}

h1 {
   font-size: calc(15px + 3vw);
   text-transform: uppercase;
}

/* ========== ========== ========== ========== ========== */
/* ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US */
/* ========== ========== ========== ========== ========== */

.about__article {
   font-size: calc(7px + 1vw);
   margin-top: 25px;
   width: 90%;
}

@media only screen and (max-width: 800px) {
   .about__article {
      font-size: calc(7px + 1vw);
      justify-self: left;
      margin-top: 25px;
      width: 100%;
   }
}

h2 {
   font-size: calc(20px + 1.5vw);
}

p {
   margin-top: 8px;
}

/* ========== ========== ========== ========== ========== */
/* OUR TEAM OUR TEAM OUR TEAM OUR TEAM OUR TEAM OUR TEAM */
/* ========== ========== ========== ========== ========== */

/* ========== ========== HERO ========== ========== */

#team__container--hero {
   display: flex;
   font-size: calc(7px + 1vw);
   margin-top: 50px;
   /* flex-direction: column; */
}

@media only screen and (max-width: 800px) {
   #team__container--hero {
      flex-direction: column;
      width: 100%;
   }
}

#card__hero {
   align-items: center;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

#card__hero--image {
   height: calc(450px + 3vw);
   object-fit: cover;
}

#card__hero--name {
   font-size: calc(7px + 1vw);
   margin-top: 10px;
   text-transform: uppercase;
}

#card__hero--title {
   font-size: 20px;
   margin-bottom: 10px;
   margin-top: 5px;
   text-transform: uppercase;
}

#about__bill {
   margin-left: 50px;
   width: 60%;
}

@media only screen and (max-width: 800px) {
   #about__bill {
      margin-left: 5px;
      width: 100%;
   }
}

/* ========== ========== MAIN ========== ========== */

.team__container--departments {
   margin-top: 25px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-height: 650px;
}

.team__container--department {
   margin-top: 25px;
   display: flex;
   flex-direction: column;
}

.department__name {
   margin-bottom: 10px;
   text-transform: uppercase;
}

.department__cards-container {
   display: grid;
   gap: 5px;
   grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
}

@media only screen and (max-width: 800px) {
   .department__cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
}

.card__general {
   align-items: center;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
   font-size: calc(7px + 1vw);
   justify-content: center;
   margin: 5px;
   text-transform: uppercase;
   width: 200px;
}

@media only screen and (max-width: 800px) {
   .card__general {
      align-items: center;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      font-size: 18px;
      justify-content: center;
      margin: 5px;
      text-transform: uppercase;
      width: 150px;
   }
}

.card__general--image {
   height: 200px;
   margin-bottom: 5px;
   object-fit: contain;
   width: 100%;
}

.card__general--name {
   font-weight: bolder;
   font-size: 18px;
   margin-bottom: 3px;
}

@media only screen and (max-width: 800px) {
   .card__general--name {
      font-size: calc(7px + 1vw);
      margin-bottom: 3px;
   }
}

.card__general--title {
   font-size: 14px;
   margin-bottom: 5px;
   text-align: center;
}

@media only screen and (max-width: 800px) {
   .card__general--title {
      align-self: center;
      font-size: calc(5px + 1vw);
      text-align: center;
      margin-bottom: 5px;
   }
}