@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.text-container {
  transform: rotate(-3deg);
  font-size: clamp(10vw, 40px, 12vh);
  text-align: center;
  color: black; /* Change this to your desired color */
  font-family: 'Amatic SC', cursive;
  font-weight: bold; /* Add this line to make the text bolder */
  clear: both; /* Ensures the image container starts on a new line */
}

.image-container {
  display: flex; /* Arrange images horizontally */
  flex-wrap: wrap; /* Allow images to wrap to multiple lines */
  width: 100%; /* Container takes full width */
  margin: 0 auto; /* Center the container horizontally */
}

.image-item {
  flex: 1 0 10%; /* Each image takes 25% of container width */
  margin: 10px; /* Add spacing between images */
  text-align: center; /* Center info text below image */
}

.image-item img {
  max-width: 100%; /* Ensure images fill container width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Crop images to squares */
}

.info {
  margin-top: 2px; /* Add space between image and info */
  font-size: 2rem; /* Adjust font size as needed */
  transform: rotate(-3deg);
  text-align: center;
  color: black; /* Change this to your desired color */
  font-family: 'Amatic SC', cursive;
}