.certificate-table-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-bottom: 1px solid var(--color-table-border);
    background-color: var(--color-table-row);

    @media screen and (max-width: 990px) {
        grid-template-columns: repeat(2, 1fr);
    }

    .certificate-table-header-item {
        padding: 13px 15px;
        font-weight: bold;      

        @media screen and (max-width: 990px) {
            padding: 15px 10px;
        }

        &:nth-child(1) {
            grid-column: span 1;
        }

        &:nth-child(2) {
            grid-column: span 2;   
            
            @media screen and (max-width: 990px) {
                grid-column: span 1;
            }
        }
        &:nth-child(3) {
            grid-column: span 2;

            @media screen and (max-width: 990px) {
                display: none;
            }
        }
        &:nth-child(4) {
            grid-column: span 1;

            @media screen and (max-width: 990px) {
                display: none;
            }
        }
    }


}
.certificate-table-body {
    display: flex;
    flex-direction: column;

    .certificate-table-row {
        display: grid;
        grid-template-columns: repeat(6, 1fr);

        &:nth-child(odd) {
            background-color: var(--color-table-row);
        }

        @media screen and (max-width: 990px) {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 2;
        }

        .certificate-table-row-item {
            padding: 13px 15px;
            border: 1px solid var(--color-table-border);
            border-top: none;
            border-left: none;
            display: flex;
            align-items: center;

            @media screen and (max-width: 990px) {
                padding: 10px;

                a {
                    text-decoration: underline;
                }
            }

            &:nth-child(1) {
                grid-column: span 1;
                border-left: 1px solid var(--color-table-border);
            }

            &:nth-child(2) {
                grid-column: span 2;
                border-left: 1px solid var(--color-table-border);

                @media screen and (max-width: 990px) {
                    grid-column: span 1;
                    border-left: none;
                }            
            }
            &:nth-child(3) {
                grid-column: span 2;

                @media screen and (max-width: 990px) {
                    grid-column: span 1;
                    border-left: 1px solid var(--color-table-border);
                }
            }

            &:nth-child(4) {
                grid-column: span 1;
            }
        }
    }
}