.pn-charts .pn-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
    align-items: start;
}
.pn-charts .pn-chart {
    min-width: 0;
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: .7rem;
    padding: .75rem;
}
.pn-charts .pn-chart h3 {
    font-size: 1.15rem;
    margin: 0 0 .25rem;
}
.pn-charts .pn-chart-source {
    font-size: .8rem;
    margin: 0 0 .45rem;
}
.pn-charts ol.pn-chart-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pn-charts li.pn-chart-row {
    display: grid;
    grid-template-columns: 1.4rem 2.75rem minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
    border-top: 1px solid rgba(128, 128, 128, .28);
    margin: 0;
    padding: .48rem 0;
    line-height: 1.25;
}
.pn-charts .pn-chart-row img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: .32rem;
    margin: 0;
}
.pn-charts .pn-chart-rank,
.pn-charts .pn-chart-movement {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pn-charts .pn-chart-info {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pn-charts .pn-chart-info > a,
.pn-charts .pn-chart-info > strong {
    font-size: .94rem;
    font-weight: 700;
}
.pn-charts .pn-chart-info > span {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
}
.pn-charts .pn-chart-genre {
    font-style: italic;
}
@media (max-width: 480px) {
    .pn-charts .pn-chart { padding: .55rem; }
    .pn-charts li.pn-chart-row {
        grid-template-columns: 1.15rem 2.25rem minmax(0, 1fr) auto;
        gap: .35rem;
    }
    .pn-charts .pn-chart-row img {
        width: 2.25rem;
        height: 2.25rem;
    }
}