.section-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50); 
    @media(min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
    }
    @media(min-width: 1024px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
    }
    .wp-block-heading {
        color: var(--wp--preset--color--cgc-grey-900);
        margin-bottom: auto;
    }
    .link {
        max-width: 100%;
        position: relative;
        padding-left: 1.25rem;
        color: var(--wp--preset--color--cgc-grey-900);
        font-weight: 600;
        text-transform: uppercase;
        margin-top: auto;
    }
    .link::before,
    .link::after {
        content: '\e09f';
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
        font-size: var(--wp--preset--font-size--small);
        position: absolute;
        left: 0;
        line-height: 1;
        transform: translateY(-50%);
        top: 10px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        color: var(--wp--preset--color--cgc-blue-700);
    }

    .link::before {
        opacity: 1;
        transform: translateY(-50%) translateY(0);
        z-index: 2;
    }

    .link::after {
        opacity: 0;
        transform: translateY(-50%) translateY(100%);
        z-index: 1;
    }
    .description {
        transition: max-height .5s ease-out;
        color: var(--wp--preset--color--cgc-grey-900);
        @media(min-width: 1024px) {
            opacity: 0;
            transform: translateY(20px);
            transition: 
                opacity 0.4s ease,
                transform 0.4s ease,
                max-height 0.4s ease;
            will-change: opacity, transform, max-height;
            max-height: 0;
            overflow: hidden;
        } 
    }
    .section-wrapper {
        
        @media(min-width: 768px) {
            min-height: 300px;
        }
        .wp-block-group {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    }
    .section-wrapper:is(:hover, :focus) {
        text-decoration: none;
        .description {
            max-height: 100px;
            opacity: 1;
            transform: translateY(0);
        }
        .link::before {
            opacity: 0;
            transform: translateY(-50%) translateY(-100%);
        }

        .link::after {
            opacity: 1;
            transform: translateY(-50%) translateY(0);
        }
    }
}