.section-page-card-showcase {
  overflow-x: hidden;
  .cards-container {
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .block-page-card {
      background: rgba(var(--color-base-background-2), 0.5);
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;

      &:hover {
        transform: translateY(-0.25rem);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
      }

      .block-page-image {
        width: 100%;
        height: 200px;
        overflow: hidden;

        img, svg {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .block-page-cta {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .block-page-text-content {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        .block-page-link-button-group {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        .card-title {
          margin-top: 0;
          margin-bottom: 1rem;
          font-size: var(--text-xl);
          color: rgb(var(--font-color));
        }

        .card-description {
          margin-bottom: 1.5rem;
          flex: 1;

          p {
            margin-top: 0;
            margin-bottom: 0.5rem;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .btn {
          align-self: flex-start;
          
          &:focus {
            outline: 2px solid currentColor;
            outline-offset: 2px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 749px) {
    .cards-container {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .card-item {
        .card-image-wrapper {
          height: 0;
          padding-bottom: 100%; /* 1:1 aspect ratio */
          position: relative;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}