* {
  padding: 0;
  margin: 0;
  box-sizing: 0;
}
body {
  background-color: #f7f7f7;
  color: #010101;
}
html {
  font-size: 62.5%;
}
img {
  width: clamp(13.8rem, 10.2789rem + 9.3897vw, 23.8rem);
  grid-row: 1;
  grid-column: 1;
}

/*********** font size,color, position..... **********/
.page-header {
  font-size: 3.6rem;
  line-height: 8rem;
  font-family: "PT Serif", serif;
  font-weight: 700;
}
.description-header {
  font-size: 2.3rem;
  line-height: 5rem;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.team-description {
  font-size: clamp(1.4rem, 1.2592rem + 0.3756vw, 1.8rem);
  line-height: 2.7rem;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}
.name {
  font-size: 1.8rem;
  line-height: 5rem;
  grid-row: 2/3;
  grid-column: 1;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  height: 2em;
}
.job-role {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 3rem;
  letter-spacing: 2.5px;
  writing-mode: vertical-lr;
  text-transform: uppercase;
  grid-column: 2;
  grid-row: 1/2;
}
.footer__text {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  font-size: 1.3em;
  font-weight: 600;
  color: #a9a9a9;
}
.footer__textlink {
  color: #a9a9a9;
}

/*********** font size,color, position..... END **********/

/************* div,section, image, sizing, postioning..... **********/
.header {
  width: clamp(37.5rem, 0rem + 100vw, 144rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 5% auto auto auto;
}
.header__content {
  width: clamp(33rem, 29.831rem + 8.4507vw, 42rem);
  margin-left: clamp(0rem, -56.3333rem + 83.3333vw, 2rem);
}

.crew-profile-container {
  position: relative;
  display: grid;
  width: clamp(13.8rem, 10.2789rem + 9.3897vw, 23.8rem);
  grid-template-columns: clamp(13.8rem, 10.2789rem + 9.3897vw, 23.8rem) auto;
  grid-template-rows: 1fr 4rem;
}
.crew-container {
  display: grid;
  grid-template-rows: repeat(2, 22rem 1fr);
  grid-template-columns: repeat(3, 1fr);
  place-items: center start;
  width: clamp(37.5rem, 0rem + 100vw, 144rem);
  place-items: center stretch;
  margin: auto;
}
.image-box1 {
  grid-row: 1/3;
  grid-column: 1;
}
.image-box2 {
  grid-row: 2/3;
  grid-column: 2;
}
.image-box3 {
  grid-row: 1/3;
  grid-column: 3;
}
.image-box4 {
  grid-row: 3/6;
  grid-column: 1;
}
.image-box5 {
  grid-row: 4/6;
  grid-column: 2;
}
.image-box6 {
  grid-row: 3/6;
  grid-column: 3;
}
.footer__content {
  margin: 7% auto 3% auto;
  width: fit-content;
}

/************* div,section, image, sizing, postioning..... END **********/
@media (min-width: 578px) and (max-width: 1440px) {
  .header,
  .image-box1,
  .image-box4 {
    margin-left: clamp(1rem, -0.8657rem + 4.9751vw, 2rem);
  }
}
@media (max-width: 576px) {
  body {
    overflow-x: hidden;
  }
  .crew-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 15rem 1fr);
  }
  .crew-profile-container,
  .header {
    margin-left: clamp(1rem, -0.8657rem + 4.9751vw, 2rem);
  }
  .image-box1 {
    grid-row: 1/3;
    grid-column: 1;
  }
  .image-box2 {
    grid-row: 2/3;
    grid-column: 2;
  }
  .image-box3 {
    grid-row: 3/5;
    grid-column: 1;
  }
  .image-box4 {
    grid-row: 4/5;
    grid-column: 2;
  }
  .image-box5 {
    grid-row: 5/7;
    grid-column: 1;
  }
  .image-box6 {
    grid-row: 6/7;
    grid-column: 2;
  }
}
@media (max-width: 362px) {
  .crew-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    row-gap: 3rem;
    margin: 10% 0;
    overflow-x: hidden;
  }
  .crew-profile-container {
    grid-column: 1;
    grid-template-columns: 18rem auto;
    margin: 0 18%;
  }

  img {
    width: 18rem;
  }
  .image-box1 {
    grid-row: 1;
  }
  .image-box2 {
    grid-row: 2;
  }
  .image-box3 {
    grid-row: 3;
  }
  .image-box4 {
    grid-row: 4;
  }
  .image-box5 {
    grid-row: 5;
  }
  .image-box6 {
    grid-row: 6;
  }
  footer {
    display: flex;
    justify-content: center;
  }
}