@import url("./TYPOGRAPHY.css");
@import url("./BLOCK_SPACING.css");
@import url("./BLOCK_GRID.css");

.block_columns {
    box-sizing: border-box;
    padding: var(--iridi-block-padding);
    background: var(--block-columns-background, #fff);
    color: var(--block-columns-color, #111827);
}

.block_columns_title {
    max-width: 24ch;
    margin: 0;
    font-size: var(--iridi-title-font-size);
    font-weight: var(--iridi-title-font-weight);
    line-height: 1.1;
    color: var(--iridi-title-color);
}

.block_columns_desc {
    max-width: 70ch;
    margin: var(--iridi-desc-margin-top) 0 0;
    font-size: var(--iridi-desc-font-size);
    line-height: 1.45;
    color: var(--iridi-desc-color);
}

.block_columns_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-row-gap: var(--iridi-grid-row-gap);
    grid-column-gap: var(--iridi-grid-column-gap);
    margin-top: var(--iridi-desc-margin-top);
}

.block_columns_item {
    box-sizing: border-box;
    min-width: 0;
    padding-top: 24px;
    border-top: 1px solid currentColor;
}

.block_columns--cards .block_columns_item {
    width: 100%;
    padding: var(--iridi-grid-card-padding);
    background: var(--block-columns-card-background, #fff);
    color: var(--block-columns-card-color, #111827);
    border-top: 0;
}

.block_columns--cards .block_columns_item_image {
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--block-columns-image-height, 255px);
    margin: 0 0 24px;
    overflow: hidden;
    background: var(--block-columns-image-background, #e0e7ee);
}

.block_columns--cards .block_columns_item_image img {
    display: block;
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.block_columns--cards .block_columns_item_image + .block_columns_item_title {
    margin-top: 0;
}

.block_columns_number {
    display: block;
    font-size: var(--iridi-title-font-size);
    font-weight: var(--iridi-title-font-weight);
    line-height: 1.1;
}

.block_columns_item_title {
    margin: 22px 0 0;
    color: inherit;
}

.block_columns_item_desc {
    margin: 20px 0 0;
    font-size: var(--iridi-desc-font-size);
    line-height: 1.45;
}

@media (max-width: 1000px) {
    .block_columns_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }
}

@media (max-width: 700px) {
    .block_columns_grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}