.ck-tpl {
    display: grid;
    grid-gap: var(--grid-gap);
}
.ck-tpl img {
    display: block;
    max-width: 100%;
}

.ck-tpl-list .ck-tpl__item > .ck-tpl__text:first-child > *:first-child {
    margin-top: 0;
}
.ck-tpl-list .ck-tpl__text > h3:first-child {
    margin-top: 24px;
}

.ck-tpl-list-2-columns {
    grid-template-columns: repeat(2, 1fr);
}

.ck-tpl-list-3-columns {
    grid-template-columns: repeat(3, 1fr);
}

.ck-tpl-list-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

.ck-tpl-list-6-columns {
    grid-template-columns: repeat(6, 1fr);
}

.ck-tpl-card .ck-tpl__text > *:first-child {
    margin-top: 0;
}

.ck-tpl-card .ck-tpl__image-wrapper {
    grid-row: 1;
}
.ck-tpl-card .ck-tpl__text {
    grid-row: 1;
}

.ck-tpl-card-left .ck-tpl__image-wrapper {
    grid-column: 1;
}
.ck-tpl-card-left .ck-tpl__text {
    grid-column: 2;
}

.ck-tpl-card-right .ck-tpl__image-wrapper {
    grid-column: 2;
}
.ck-tpl-card-right .ck-tpl__text {
    grid-column: 1;
}

.ck-tpl-card-ratio-1-to-1 {
    grid-template-columns: 1fr 1fr;
}

.ck-tpl-card-ratio-1-to-2 {
    grid-template-columns: 1fr 2fr;
}

.ck-tpl-card-ratio-1-to-3 {
    grid-template-columns: 1fr 3fr;
}

.ck-tpl-card-ratio-2-to-1 {
    grid-template-columns: 2fr 1fr;
}

.ck-tpl-card-ratio-3-to-1 {
    grid-template-columns: 3fr 1fr;
}

@media only screen and (max-width: 1024px) {
    .ck-tpl-list-4-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .ck-tpl-list-6-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .ck-tpl-card-ratio-1-to-2 {
        grid-template-columns: 1fr 1fr;
    }

    .ck-tpl-card-ratio-1-to-3 {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 768px) {
    .ck-tpl-list-3-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .ck-tpl-list-6-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .ck-tpl-card {
        grid-template-columns: 1fr;
    }
    .ck-tpl-card .ck-tpl__image-wrapper {
        grid-column: initial;
        grid-row: initial;
    }
    .ck-tpl-card .ck-tpl__text {
        grid-column: initial;
        grid-row: initial;
    }
}
@media only screen and (max-width: 480px) {
    .ck-tpl-list-2-columns {
        grid-template-columns: 1fr;
    }

    .ck-tpl-list-3-columns {
        grid-template-columns: 1fr;
    }

    .ck-tpl-list-4-columns {
        grid-template-columns: 1fr;
    }

    .ck-tpl-list-6-columns {
        grid-template-columns: 1fr;
    }

    .ck-tpl-card {
        grid-template-columns: 1fr;
    }
    .ck-tpl-card .ck-tpl__image-wrapper {
        grid-column: initial;
        grid-row: initial;
    }
    .ck-tpl-card .ck-tpl__text {
        grid-column: initial;
        grid-row: initial;
    }
}