.deathnote-related,
.deathnote-unique {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.deathnote-related *,
.deathnote-related *::before,
.deathnote-related *::after,
.deathnote-unique *,
.deathnote-unique *::before,
.deathnote-unique *::after {
    box-sizing: border-box;
}

.dn-heading {
    margin: 0 0 22px;
}

.dn-related-grid {
    display: grid;
    grid-template-columns: repeat(var(--dn-rel-desktop, 3), minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.dn-card {
    min-width: 0;
    margin: 0;
}

.dn-image-link {
    display: block;
    overflow: hidden;
    width: 100%;
    text-decoration: none;
}

.dn-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
}

.dn-content {
    padding-top: 12px;
}

.dn-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    line-height: 1.3;
}

.dn-title a {
    color: inherit;
    text-decoration: none;
}

.dn-title a:hover,
.dn-title a:focus {
    text-decoration: underline;
}

.dn-excerpt {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
}

.deathnote-unique .dn-unique-card {
    width: 100%;
}

@media (max-width: 1024px) {
    .dn-related-grid {
        grid-template-columns: repeat(var(--dn-rel-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dn-related-grid {
        grid-template-columns: repeat(var(--dn-rel-mobile, 1), minmax(0, 1fr));
        gap: 18px;
    }
}