.details-table{
    --cell-padding: 2.4rem;

    width: 100%;
    max-width: var(--wide-width);
    margin: var(--block-margin) auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--row-gap);
}

.details-table-heading{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--column-gap);
    row-gap: var(--item-row-gap);
}

.details-table-heading.animate__animated{
    animation-name: fadeIn;
}

.details-table-heading h2{
    font: var(--font-headline-3);
    margin: 0;
}

.details-table-heading p{
    margin: 0;
}

.details-table table{
    width: 100%;
    font: var(--font-body-small);
    table-layout: fixed;
}

.details-table table.animate__animated{
    animation-name: fadeIn;
}

.details-table table :is(th, td){
    padding: var(--cell-padding);
}

.details-table table thead{
    background-color: var(--color-blue);
    color: var(--color-white);
}

.details-table table tr th:first-child{
    width: 50%;
}

.details-table table tbody tr{
    border-bottom: 0.2rem solid var(--accent-color);
}

.details-table table tbody tr th{
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 40%;
}


@media (min-width: 768px){
    .details-table-heading{
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .details-table-heading h2{
        font-size: 4rem;
    }
    
    .details-table table tr th:first-child{
        width: 40%;
    }
}

@media (min-width: 1200px){
    .details-table table tr th:first-child{
        width: 30%;
    }
}