.headquarters {
  display: grid;
  width: 100%;
  padding: 10rem 5rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "title title title"
    "card1 card2 card3";
  gap: 2rem;
}

.title {
  grid-area: title;
  color: var(--grey);
  font-size: 1.8rem;
  margin-bottom: 3rem;
}

.country {
  color: var(--darker-cyan);
}

.h1 {
  grid-area: card1;
}

.h2 {
  grid-area: card2;
}

.h3 {
  grid-area: card3;
}

.headquarter img {
  margin-bottom: 2rem;
}

.headquarter h3 {
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 798px) {
  .headquarters {
    padding: 5rem 3rem;
  }
}

@media screen and (max-width: 740px) {
  .headquarters {
    grid-template-areas:
    "title title title"
    "card1 card1 card1"
    "card2 card2 card2"
    "card3 card3 card3";
    text-align: center;
  }
}

@media screen and (max-width: 540px) {
  .headquarters {
    padding: 5rem 1rem;
  }

  .headquarter {
    margin: 0 auto;
  }
}