:root {
    --transition-duration : 200ms;
}

.navbar-offset {
    height : calc(var(--var-navbar-height) + var(--var-panel-gap) * 2);
}

.testimonials-grid {
    --min-item-width      : 280px;
    --min-item-height     : var(--min-item-width);
    --item-padding        : 2rem;
    min-height            : 100dvh;

    display               : grid;
    grid-gap              : var(--var-panel-margin);

    grid-template-columns : repeat(auto-fill, minmax(min(var(--min-item-width), 100%), 1fr));

    .testimonial-item {
        border                     : 1px solid var(--color-grey-light);
        border-radius              : var(--var-panel-border-radius);
        min-height                 : var(--min-item-height);
        display                    : grid;
        grid-template-rows         : 1fr min-content;
        gap                        : var(--item-padding);
        align-items                : center;
        overflow                   : hidden;
        box-shadow                 : none;

        transition-property        : transform, box-shadow, border;
        transition-duration        : var(--transition-duration);
        transition-timing-function : ease-in-out;

        .item-image {
            flex-shrink   : 0;
            grid-column   : 1;
            grid-row      : 1 / span 2;
            margin-inline : auto;

            img {
                height     : 80px;
                object-fit : cover;
            }
        }

        .item-label-bg {
            width                      : 100%;
            height                     : 100%;
            grid-column                : 1;
            grid-row                   : 1 / span 2;

            background-color           : var(--color-grey-light-bright);

            backdrop-filter            : blur(16px) hue-rotate(348deg);
            display                    : flex;
            align-items                : center;
            opacity                    : 0;

            transition-property        : opacity;
            transition-duration        : calc(var(--transition-duration) / 2);
            transition-timing-function : ease-in-out;

            .item-label {
                margin-inline  : auto;
                user-select    : none;
                padding-inline : 4rem;
                text-align     : center;
                line-height    : 1.6;
                font-weight    : 600;
                font-size      : 2.0rem;
                color          : var(--color-grey-black);
            }
        }

        .item-type {
            font                  : var(--font-tag-label);
            font-feature-settings : var(--font-features);
            line-height           : 1.2;
            width                 : min-content;
            background-color      : var(--color-navbar-hover);
            backdrop-filter       : blur(4px);
            margin                : var(--item-padding);
            padding-inline        : 0.8rem;
            padding-block         : 0.4rem;
            border-radius         : 0.6rem;
            grid-column           : 1;
            grid-row              : 2;
        }
    }

    .testimonial-item:hover {
        transform  : scale(1.02);
        box-shadow : 0 2px 24px -6px rgba(0, 0, 0, 0.2);
        border     : 1px solid var(--color-itp-blue);
        cursor     : pointer;

        .item-label-bg {
            opacity : 1;
        }
    }
}