.hover-cards-container {
  display: flex !important;
  align-items: stretch !important;

  .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important; 
  }

  .wp-block-column > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
  }

  .wp-block-column:first-child {
    align-self: flex-start !important; 
    display: block !important;   
  }
  
  .wp-block-column:first-child > * {
    flex: none !important;               
  }
}

.hover-text {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.hover-overlay-card:hover .hover-text {
  opacity: 1;
}


@media (max-width: 1150px) {
  .hover-cards-container {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
 
  .hover-cards-container .wp-block-column:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .hover-cards-container .wp-block-column:not(:first-child) {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3)!important;
  }
}

/* On smaller screens, we want the hover text to always be visible since hover interactions are not possible. */
@media (max-width: 1050px) {
  .hover-cards-container {
    .hover-overlay-card {
      .hover-text {
        opacity: 1 !important;
      }
    }
  }
}

@media (max-width: 870px) {
  .hover-cards-container .wp-block-column:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .hover-cards-container .wp-block-column:not(:first-child) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .hover-overlay-card {
    max-height: 400px !important;
    .wp-block-cover {

      height: 400px;
    }
  }
}