/* Split: two columns, ratio 50/50, 40/60, 60/40, or three equal columns. Mobile: stacked (optionally reversed). */
.pk-split {
    display: grid;
    gap: var(--pk-gap);
    grid-template-columns: minmax(0, 1fr);
}

.pk-split__column img,
.pk-split__column video {
    border-radius: var(--pk-radius);
}

.pk-split--mobile-reverse .pk-split__column:last-child {
    order: -1;
}

@media (min-width: 48rem) {
    .pk-split {
        gap: calc(var(--pk-gap) * 1.5);
    }

    .pk-split--mobile-reverse .pk-split__column:last-child {
        order: 0;
    }

    .pk-split--ratio-0 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-split--ratio-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .pk-split--ratio-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .pk-split--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .pk-split.pk-valign-top { align-items: start; }
    .pk-split.pk-valign-center { align-items: center; }
    .pk-split.pk-valign-bottom { align-items: end; }
}

/*
 * Divider line between the columns (tx_pottkinder_divider), drawn in the middle of the gap.
 * Mobile: horizontal line between the stacked columns (above the column that comes second).
 * Desktop: full height vertical line - the columns stretch, the vertical alignment moves into the column.
 */
.pk-split--divider .pk-split__column {
    position: relative;
}

.pk-split--divider .pk-split__column + .pk-split__column::before,
.pk-split--divider.pk-split--mobile-reverse .pk-split__column:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--pk-gap) / -2);
    border-top: 1px solid var(--pk-border);
}

.pk-split--divider.pk-split--mobile-reverse .pk-split__column:last-child::before {
    content: none;
}

@media (min-width: 48rem) {
    .pk-split.pk-split--divider {
        column-gap: calc(var(--pk-gap) * 3);
        align-items: stretch;
    }

    .pk-split--divider .pk-split__column {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .pk-split--divider.pk-valign-top .pk-split__column { justify-content: flex-start; }
    .pk-split--divider.pk-valign-bottom .pk-split__column { justify-content: flex-end; }

    .pk-split--divider .pk-split__column + .pk-split__column::before {
        content: "";
        top: 0;
        bottom: 0;
        left: calc(var(--pk-gap) * -1.5);
        right: auto;
        border-top: 0;
        border-left: 1px solid var(--pk-border);
    }

    .pk-split--divider.pk-split--mobile-reverse .pk-split__column:first-child::before {
        content: none;
    }
}