/* Common styles for all screen sizes */
header {
  text-align: center;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
}

.icon {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 120px;
  display: block;
  margin: 0 auto;
}

/* Style for the header image on smaller screens */
#header-image {
  max-width: 50%; /* Image will not exceed the header's width */
  height: auto;    /* Maintain aspect ratio */
}

/* Media query for screens with a maximum width of 768px (tablets) */
@media screen and (max-width: 768px) {
  .icon-grid {
    grid-template-columns: repeat(2, 1fr); /* Change to 2 columns for tablets */
  }
  
  /* Adjust the image size for tablets */
  #header-image {
    max-width: 80%; /* Reduce image width to 80% on tablets */
  }
}

/* Media query for screens with a maximum width of 480px (mobile) */
@media screen and (max-width: 480px) {
  .icon-grid {
    grid-template-columns: repeat(1, 1fr); /* Single column for mobile */
  }
  
  /* Further reduce the image size for mobile */
  #header-image {
    max-width: 100%; /* Image takes full width on mobile */
  }
}