.kf-styled-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kf-styled-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.kf-styled-list li img {
    flex-shrink: 0;
}

/* Style 1 */
.kf-styled-list[data-style="style-1"] > ul > li {
    display: grid;
    grid-template-areas: "icon title" "icon content";
    grid-template-columns: auto 1fr;
    gap: 0 16px;
    align-items: flex-start;
}

.kf-styled-list[data-style="style-1"] > ul > li:not(:last-child) {
    margin-bottom: 16px;
}

.kf-styled-list[data-style="style-1"] > ul > li > .kf-styled-list__icon {
    grid-area: icon;
}

.kf-styled-list[data-style="style-1"] > ul > li > .kf-styled-list__title {
    grid-area: title;

    font-weight: 500;
    font-size: var(--wp--preset--font-size--x-32);
    line-height: 1.125;
    vertical-align: middle;

    color: #191919;

    margin: 0;
}

.kf-styled-list[data-style="style-1"] > ul > li > .kf-styled-list__content {
    grid-area: content;
}

.kf-styled-list[data-style="style-1"] > ul > li > .kf-styled-list__content > *:first-child {
    margin-top: 12px;
}


/* Style 2 */
.kf-styled-list[data-style="style-2"] {
    margin-top: 48px;
    margin-bottom: 32px;
}
.kf-styled-list[data-style="style-2"] > ul {
    display: grid;
    grid-template-columns: 2fr 5fr;
    align-items: flex-start;
    gap: 30px 26px;
}
.kf-styled-list[data-style="style-2"] > ul > li {
    display: grid;
    grid-column: span 2;              /* Span both parent columns */
    grid-template-columns: subgrid;   /* Inherit column sizing from parent */
    grid-template-rows: auto 1fr;    /* Define rows locally */
    grid-template-areas: 
        "icon content"
        "title content";

    gap: 12px 32px;

    position: relative;
}

.kf-styled-list[data-style="style-2"] > ul > li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(.9);
    background: url('data:image/svg+xml,<svg width="910" height="1" viewBox="0 0 910 1" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0.5H910" stroke="url(%23paint0_radial_1_998)"/><defs><radialGradient id="paint0_radial_1_998" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(455 1) rotate(90) scale(0.5 455)"><stop stop-color="%23191919"/><stop offset="1" stop-color="%23191919" stop-opacity="0"/></radialGradient></defs></svg>') no-repeat center / contain;
}

.kf-styled-list[data-style="style-2"] > ul > li > .kf-styled-list__icon {
    grid-area: icon;
}

.kf-styled-list[data-style="style-2"] > ul > li > .kf-styled-list__title {
    grid-area: title;

    font-family: Degular;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    vertical-align: middle;

    color: #191919;

    margin: 0;
}

.kf-styled-list[data-style="style-2"] > ul > li > .kf-styled-list__content {
    grid-area: content;
}

@media (max-width: 767px) {
    .kf-styled-list__icon {
        transform: scale(.8);
    }

    .kf-styled-list[data-style="style-2"] > ul > li {
        display: grid;
        grid-template-areas: "icon title" "icon content";
        grid-template-columns: auto 1fr;
        gap: 0 16px;
        align-items: flex-start;
    }
}