.jRelated {
    &--heroTitle {
        font-size: 18px;
        margin-bottom: 15px;
        color: var(--jaguar-text-gray);
    }

    &--section {
        padding: 20px 0;
    }

    &--list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;

        @media (max-width: 600px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    &--image {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: var(--jaguar-border-radius-small);
        }
    }

    &--meta {
        font-size: 12px;
        color: var(--jaguar-text-gray-lightest);
    }

    &--content {
        padding: 0px 8px;
    }

    &--title {
        font-size: 16px;
        line-height: 1.3;

        &:hover {
            color: var(--jaguar-main-color);
        }
    }

    &--item {
        padding: 5px;
        border-radius: var(--jaguar-border-radius);
        @include jaguar-border;
    }
}
