.parent-container {
    display: flex;
    justify-content: space-between; /* Adjust spacing as needed */
    padding: 2%;
    width: 100%;
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
}

.child-container {
  /* …your existing rules… */
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.child-container:hover {
  filter: brightness(1.5);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}


.child-container {
    position: relative;
    width: 22.5%;
    height: 130px;
    padding: 1.5%;
    color: white;
    background-color: #091c2e;
    border-radius: 15px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); /* Adds a shadow */
    text-decoration: none;
}

.text-container { 
    position: relative; /* Makes the text container part of the stacking context */
    z-index: 2; /* Ensures the text is above the image */
}

.child-container img {
    position: absolute;
    right: 10px;
    top: 0px;
    height: 130px;
    width: auto;  
    z-index: 1; /* Places the image behind the text */
}


@media (max-width: 800px) {
    .child-container {
        width: 48%; /* 2 items per row */
    }

    .parent-container {
        gap: 20px;
    }
}

@media (max-width: 520px) {
    .child-container {
        width: 46%; /* 2 items per row */
    }

    .child-container {
        height: 90px;
    }
    .child-container img {
        right: 5px;
        height: 90px;
    }

}

@media (max-width: 412px) {
    .child-container {
        height: 110px;
    }
    .child-container img {
        height: 110px;
    }
}