﻿
/* Ensure the row is a flex container and allows wrapping */
.partner-logos-section .row {
      display: flex;
      flex-wrap: wrap; /* Make sure wrapping is allowed */
      gap: 20px; /* Add a gap between columns */
      /* You might need to remove framework's negative margins on .row if present */
      margin-left: 0;
      margin-right: 0;
      /*justify-content: center;*/ /* Center the flex items if they don't fill the row */
      align-items: center; /* Vertically center the items in the row */
  }

/* Adjust the flex properties of the columns to control their sizing */
.partner-logos-section .col {
    /* Allow columns to shrink, but set a base width */
    /*flex: 0 1 150px;*/ /* Example: Don't grow, can shrink, base width 150px */
    /* Or use a percentage for base width, accounting for gap */
    /* flex: 0 1 calc(100% / 8 - 20px); For 8 items with 20px gap */

    /*padding: 0;*/ /* Remove column padding if gap on row is used */
    margin-top: 5px; /* Remove top margin if present */
    /*display: flex;*/ /* Make .col a flex container to center the image inside */
    /*justify-content: center;*/ /* Center image horizontally in the column */
    align-items: center; /* Center image vertically in the column */
}

/* Style the images inside the columns */
.partner-logos-section .col img {
    display: block; /* Images are naturally inline, but block can help with sizing/centering */
    max-width: 130px; /* Ensure image doesn't overflow its column */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain;
}

/* Keep the container styling if needed for overall section width/alignment */
.container.partner-logos-section {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
}