/**
 * Two Column List with Image Component Styles
 *
 * @package JPK
 */

.two-col-list-with-image {
    .two-col-image {
        width: 302px;

        @media (max-width: 992px) {
            width: 200px;
        }
        @media (max-width: 768px) {
            width: 100%;
        }
        img {
            width: 100%;
            display: block;
            border-radius: var(--border-radius-secondary);
        }
    }
    .two-col-text {
        width: calc(100% - 302px);
        padding-left: var(--spacing-lg);

        @media (max-width: 992px) {
            width: calc(100% - 200px);
            padding-left: var(--spacing-md);
        }
        @media (max-width: 768px) {
            width: 100%;
            padding-left: 0;
            padding-top: var(--spacing-lg);
        }
        .two-col-columns {
            gap: var(--spacing-lg);

            @media (max-width: 576px) {
                gap: var(--spacing-md);
            }
        }
        .col {
            width: calc(50% - var(--spacing-lg) / 2);

            @media (max-width: 576px) {
                width: 100%;
            }
            ul {
                margin-bottom: 0;

                li {
                    &:last-of-type {
                        padding-bottom: 0;
                    }
                }
            }
        }
    }
}