/*
  Defines a responsive grid for displaying icons.
  - Starts with 5 columns on large screens.
  - Adapts to 3 columns on tablets.
  - Adapts to 2 columns on mobile phones.
*/
.icon-grid {
    display: grid;
    /* Creates 5 columns of equal width */
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem; /* Adjusts the space between icons */
    max-width: 1300px; /* Maximum width as requested */
    margin: 2rem auto; /* Centers the grid and adds vertical space */
    padding: 2rem;
    box-sizing: border-box;
}

/* Styles for each item within the grid */
.icon-grid .icon-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-grid .icon-item img {
    width: 100px; /* This creates a consistent box for the image */
    height: 100px; /* This ensures all images occupy the same vertical space */
    object-fit: contain; /* This scales the image to fit without distortion */
    box-shadow: none;
}

.icon-grid p {
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
}

/* Responsive adjustments for tablets */
@media (max-width: 1024px) {
    .icon-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive adjustments for mobile phones */
@media (max-width: 768px) {
    .icon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}