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

.testimonial-panel {
    background-color : var(--color-grey-light);
    padding          : 8rem;

    .testimonial-image {
        grid-column   : 1;
        grid-row      : 1 / span 2;

        height        : 200px;
        border-radius : var(--var-panel-border-radius);
        fill          : var(--color-grey-medium);
        margin-inline : auto;
        margin-top    : 2rem;
        margin-bottom : 4rem;
    }

    .testimonial-title {
        grid-column : 2;
        grid-row    : 1;
        color       : var(--color-itp-blue);
    }

    .testimonial-subtitle {
        margin-top  : 4rem;
        color       : var(--color-grey-dark-dim);
        line-height : 1.2;
    }

    .testimonial-paragraph {
        grid-column : 2;
        grid-row    : 2;

        margin-top  : 2rem;
        color       : var(--color-grey-black);
        font-size   : 1.8rem;
        max-width   : 100ch;
    }

    .testimonial-quote {
        color          : var(--color-grey-dark-dim);
        margin-block   : 4rem;
        padding-inline : 4rem;
        padding-block  : 2rem;
        display        : flex;

        p {
            position    : relative;
            display     : inline;
            font-style  : italic;
            font-size   : 1.8rem;
            line-height : 1.6;
            max-width   : 100ch;
            font-weight : 500;
        }

        p::before,
        p::after {
            position       : absolute;
            font-size      : 8rem;
            line-height    : 1;
            pointer-events : none;
            color          : var(--color-blue-light);
        }

        p::before {
            content : "“";
            top     : -3rem;
            left    : -6rem;
        }

        p::after {
            content : "”";
            right   : -4rem;
            bottom  : -6rem;
        }
    }

    .testimonial-bulletpoints {
        margin-left   : 2rem;
        margin-top    : 2rem;
        margin-bottom : 4rem;
        padding       : 0;
        list-style    : none;

        .testimonial-bulletpoint {
            color        : var(--color-grey-black);
            font-size    : 1.8rem;
            line-height  : 1.0;
            position     : relative;
            padding-left : 2rem;
            margin-top   : 2rem;
        }

        .testimonial-bulletpoint::before {
            --size           : 6px;

            content          : "";
            color            : var(--color-blue-light);
            position         : absolute;
            left             : 0;
            top              : 9px;
            width            : var(--size);
            height           : var(--size);
            border-radius    : 50%;
            background-color : currentColor;
            transform        : translateY(-50%);
        }
    }

    .testimonial-table {
        margin-block : 4rem;
        overflow-x   : auto;

        .testimonial-table-grid {
            --testimonial-table-columns    : 0;
            --testimonial-table-grid-color : var(--color-grey-medium);

            display                        : grid;
            grid-template-columns          : repeat(var(--testimonial-table-columns), minmax(min-content, 1fr));

            border                         : 1px solid var(--testimonial-table-grid-color);

            .testimonial-table-cell {
                font        : var(--font-mono-small);
                font-size   : 1.4rem;
                color       : var(--color-grey-black);

                padding     : 1rem;
                border      : 1px solid var(--testimonial-table-grid-color);

                /*border-right  : 1px solid currentColor;*/
                /*border-bottom : 1px solid currentColor;*/
                line-height : 1.5;
            }

            .testimonial-table-cell.is-header {
                color       : var(--color-grey-dark-dim);
                font-weight : 800;
            }
        }
    }

    .nav {
        margin-inline   : auto;
        margin-top      : 4rem;
        display         : flex;
        gap             : 2rem;
        justify-content : flex-end;
        align-items     : center;

        .nav-link {
            text-underline-offset : 4px;
            text-wrap             : nowrap;
            color                 : var(--color-grey-dark);
        }

        .nav-link:hover {
            text-decoration-line : underline;
            color                : var(--color-grey-black);
        }
    }
}

@media (max-width : 800px) {
    .testimonial-panel {
        padding : 4rem;

        .testimonial-image {
            padding-inline : 4rem;
        }
    }
}

@media (max-width : 512px) {
    .testimonial-panel {
        padding : 4rem;

        .testimonial-table {

            .testimonial-table-grid {

                .testimonial-table-cell {
                    padding : 0.2rem;

                }
            }
        }

        .nav {
            justify-content : center;
        }
    }
}

@media (max-width : 432px) {
    .testimonial-panel {
        padding : 2rem;

        .testimonial-table {

            .testimonial-table-grid {

                .testimonial-table-cell {
                    font-size : 1.2rem;
                }
            }
        }
    }
}