footer {
  padding: 70px 0;
  background: var(--primary-color);
}

footer h2 {
  font-size: 50px;
  text-align: center;
}

.grid_container {
  margin: 60px auto;
  width: 1500px;
  max-width: 90%;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 15px;
  grid-template-areas: 
    "item1 item2 item3 item4"
    "item5 item5 item5 item5";
}

.grid_item {
  background-color: var(--primary-color);
  padding: 50px;
  display: flex;
  flex-direction: column; /* Icons und Text untereinander */
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 25px;
}

.grid_item img {
  height: 150px;
  width: 150px;
}

#item1 {
  grid-area: item1;
}

#item2 {
  grid-area: item2;
}

#item3 {
  grid-area: item3;
}

#item4 {
  grid-area: item4;
}

#item5 {
  grid-area: item5;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

@media(max-width: 1300px) {
  .grid_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
      "item1 item2"
      "item3 item4"
      "item5 item5";
  }
}

@media(max-width: 900px) {
  .grid_container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
      "item1"
      "item2"
      "item3"
      "item4"
      "item5";
  }
}

@media(max-width: 650px) {
  footer h2 {
    font-size: 9vw;
  }
  
  .grid_item {
    padding: 20px;
  }
  
  .grid_item img {
    height: 100px;
    width: 100px;
  }
  
  .grid_item h3 {
    font-size: 24px;
  }    
}
