:root {
    --bc-article-margin: 24px;
}

.panorama-magazine {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    @media (min-width: 600px) {
        flex-wrap: nowrap;
    }
    & > .wp-block-group {
        flex-basis: 100% !important;
        @media (min-width: 600px) {
            flex-basis: calc(70% - var(--bc-article-margin)) !important;
        }
    }
    & > .bc-block-columns,
    & > .wp-block-blockcraft-columns {
        flex-basis: 100% !important;
        @media (min-width: 600px) {
            flex-basis: 30% !important;
        }
    }
}

.bc-block-columns {
    &.bc-force-inline-on-mobile {
        @media (max-width: 599px) {
            & > .bc-block-column > .bc-article {
                display: flex;
                gap: 1rem;
                align-items: center;
                margin-bottom: 0;
                & h2 {
                    line-height: normal;
                }
                & h2 > a {
                    font-size: var(--wp--preset--font-size--medium) !important;
                }
                & > a {
                    width: 145px;
                    min-width: 145px;
                    aspect-ratio: 16 / 9;
                }
                & > .block-group {
                    width: calc(66.66% - (var(--bc-article-margin) / 2));
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    gap: calc(var(--bc-article-margin) / 4) !important;
                }
                .bc-single-category {
                    margin: 0;
                    font-size: var(--wp--preset--font-size--x-small);
                    @media (min-width: 600px) {
                        font-size: var(--wp--preset--font-size--small);
                    }
                }
                .bc-single-author a {
                    display: flex;
                    p {
                        font-size: var(--wp--preset--font-size--x-small);
                        @media (min-width: 600px) {
                            font-size: var(--wp--preset--font-size--small);
                        }
                    }
                }
            }
        }
    }
    &.bc-force-overflow-on-mobile {
        @media (max-width: 599px) {
            overflow-x: auto;
            flex-wrap: nowrap;
            & > .bc-block-column {
                flex: 0 0 auto;
                width: 330px;
            }
        }
    }
}

@media (max-width: 599px) {
    body:not(.wp-admin) {
        .bc-block-columns {
            gap: 0 !important;
        }
    }
    .bc-card.bc-card--inline.bc-card--small {
        & .block-group {
            & > a {
                width: 145px !important;
            }
        }
    }
    .bc-block-columns {
        &.bc-force-inline-on-mobile {
            .bc-block-column {
                margin-bottom: 1rem;
            }
        }
    }
    .bc-force-overflow-on-mobile {
        .bc-block-column {
            margin-right: 1rem;
        }
    }
}

/* backend only */
.wp-block-blockcraft-columns {
}