/* Fonts */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

* {
  font-family: "Barlow Semi Condensed", sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgba(236, 242, 248, 1);
  justify-content: space-between; /* top h1, center wrapper, bottom h3 */
  padding: 10px 0;
}

h1,
h3 {
  text-align: left;
  margin-left: 20px;
}

.wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Container grid */
.container {
  max-width: 1200px;
  width: 100%;
  display: grid;
  gap: 18px;
  grid-template-areas:
    "daniel_clifford daniel_clifford jonathan_walters kira_whittle"
    "jeanette_harmon patrick_abrams patrick_abrams kira_whittle";
  grid-template-columns: repeat(4, 1fr);
}

/* Box base style */
.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 16px;
  gap: 12px;
  height: 100%;
}

/* Boxes colors */
.box_daniel_clifford {
  grid-area: daniel_clifford;
  background-color: rgba(167, 117, 241, 1);
  color: #fff;
}
.box_jonathan_walters {
  grid-area: jonathan_walters;
  background-color: rgba(72, 85, 106, 1);
  color: #fff;
}
.box_kira_whittle {
  grid-area: kira_whittle;
  background-color: #fff;
  color: rgba(72, 85, 106, 1);
}
.box_jeanette_harmon {
  grid-area: jeanette_harmon;
  background-color: #fff;
  color: rgba(72, 85, 106, 1);
}
.box_patrick_abrams {
  grid-area: patrick_abrams;
  background-color: rgba(25, 32, 45, 1);
  color: #fff;
}

/* Person info */
.box_person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.box_name {
  display: flex;
  flex-direction: column;
}

.box_text_name {
  font-weight: 500;
  font-size: 13px;
}
.box_text_graduate {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.5;
}

/* Main text */
.box_text_main_idea {
  font-weight: 600;
  font-size: 18px;
  margin-top: 10px;
}
.box_text_main {
  font-weight: 500;
  font-size: 16px;
  opacity: 0.7;
  margin-top: auto;
}

/* Images */
img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
  .container {
    grid-template-areas:
      "daniel_clifford"
      "jonathan_walters"
      "kira_whittle"
      "jeanette_harmon"
      "patrick_abrams";
    grid-template-columns: 1fr;
  }
}