/* Grid Syle Sheet */

.grid-container {
  display: grid;
  justify-content: center;
  place-items: center;
  max-width: 1080px;
  width: 100%;
  margin: 20px auto;
  border-radius: 10px;
  background-color: var(--contentBackground);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Prevent unnecessary scrollbar */
}

.grid-container p {
  line-height: 1.8;
}

.grid-container h2 {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 1.45em;
  font-weight: 500;
  color: var(--bodyh2Text);
  margin: 2px;
}

.grid-box {
  width: calc(100% - 40px); /* Take up 100% width and subtract twice the margin (20px on each side) */
  box-sizing: border-box;
  padding: 20px;
  margin: 20px; /* Add margin directly to the .grid-box */
  text-align: center; /* Center align content within the grid box */
}

.grid-box img {
  display: block;
  margin: 0 auto; /* Center the image horizontally */
  max-width: 100%; /* Ensure the image does not exceed its container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 50%; /* Apply border-radius for rounded corners */
}

@media screen and (max-width: 600px) {
  .grid-box {
    width: calc(100% - 10px); /* Adjust the width for smaller screens */
    margin: 10px; /* Adjust the margin for smaller screens */
  }
}