.home-link{
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* Grid container with max-width */
.grid-container {
    display: grid;
    gap: 1vw; /* Space between grid items */
    grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
    max-width: 100%; /* Prevents the container from exceeding screen width */
    margin: 0 auto; /* Centers the grid container */
    padding: 0 16px; /* Adds padding for extra spacing */
  }

  h2 {
    font-family: "Inter", serif;
    color: #717171;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    text-align: center;
    padding: 100px 60px;
  }


  @media (min-width: 1200px) {
    .grid-container {
        max-width:1200px;
        gap: 16px;
    }
    .grid-item{
        padding: 16px;
    }
  }
  
  /* Responsive behavior for smaller screen sizes */
  @media (max-width: 758px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
    }
    h2{padding: 45px;}
  }
  
  @media (max-width: 390px) {
    .grid-container {
      grid-template-columns: 1fr; /* Single-column layout */
    }
    h2{padding: 60px 10px;}
  }
  
  /* Make images responsive inside grid items */
  .grid-item img {
    max-width: 100%; /* Ensures images don't exceed the item's width */
    height: auto; /* Maintains aspect ratio */
  }
  svg{
    width: 100%;
    height: auto;
  }
  
  /* Optional styling for grid items */
  .grid-item {
    padding: 1vw;
    text-align: center;
  }