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

.two-col-list {
    .two-col-list-wrapper {
        .two-col-list-intro {
            max-width: 580px;
            margin-bottom: var(--spacing-md);

            h3 {
                font-size: 1.5rem;
                line-height: 1.2;

                @media (max-width: 768px) {
                    font-size: 1.3rem;
                }
            }
        }
        .two-col-list-columns {
            gap: var(--spacing-md);

            @media (max-width: 768px) {
                gap: 0px;
            }
            .two-col-list-col {
                width: calc(50% - calc(var(--spacing-md) / 2));

                @media (max-width: 768px) {
                    width: 100%;
                }
                &:last-of-type {
                    @media (max-width: 768px) {
                        margin-top: var(--spacing-md);
                    }
                }
                p {
                    font-family: var(--font-heading-primary);
                    font-weight: bold;
                }
                ul {
                    margin-bottom: 0px;

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