CSS Grid Woes

    /* ++ PRAISE CARDS ++ */

    .praiseCardContainer {
       display: grid !important;
       grid-auto-rows: 1fr !important;
       gap: 9rem 2rem !important;

       grid-template-columns: 
          repeat(auto-fit, minmax(min(512px, 100%), 1fr)) !important;

       grid-row: span 3 !important; 

       align-items: start; 
    }

    /* .praiseCardContainer > * {
       grid-column: auto !important;
       margin: 0px;
    } */

    .praiseCardContainer > .colelm,
    .praiseCardContainer > .grpelem {
      display: flow-root;
    }

    .praiseCard {
       display: grid !important;
       grid-template-columns: subgrid !important;
       grid-row: span 4 !important;
       overflow: hidden !important;
       
    height: auto !important; 
       position: relative !important; */
    }

    .praiseCardimage {
      aspect-ratio: 1 / 1 !important;
      overflow: hidden !important;
    }

    .praiseCard .clip_frame img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* Prevent layout shift during image loading */
    .praiseCard .clip_frame img[src*="blank.gif"] {
        background: #f0f0f0; /* Placeholder color while loading */
    }

    /* .praiseCardContainer > rounded-corners clip_frame colelem {
    height: inhrit !important;
    width: inherit !important;
    } */

    .praiseCardTitle,
    .praiseCardText  {
       width: 100% !important;
       margin: 0px !important;
    }

    .praiseLinkedinButton {
       display: block !important;
       position: absolute !important;
       margin-top: 3.5em !important;
       bottom: 88px !important;
    }

    </style>