/**
 * 素の core ブロック用の補完CSS。
 *
 * blocks-compat.css が受け持つのは「BurgerEditor から変換された本文」
 * （bgb- クラスを持つ group）で、こちらは**新しく挿入された素のブロック**。
 */

/* ---------------------------------------------------------------------------
   ## 何を揃えるのか
*
     本文 → 本文        51px（= 3em。箱の margin-bottom）
     本文 → 大見出し    51px（見出しの上余白は .bge-title-h2 が 0 にしている）
     大見出し → 本文    55px（見出し自身の margin-bottom）
     本文 → 中見出し    51px
     中見出し → 本文    30px
*
   つまり既存記事は「**どのブロックも自分の下に余白を持ち、上には持たない**」
   という一本の決まりで出来ている。ここではその決まりを素のブロックへ移す。
*
   ## なぜ上余白を 0 にするのか
*
   .c-content-main は grid なので、直下の要素どうしの margin は**相殺しない**
   （足し算になる）。素の見出しは style_org.css の
   `.c-content-main h2{margin:1em 0 55px}` で上に 34px を持っているため、
   前の段落へ 3em を足すと 51+34=85px になって既存より広がる。
   だから上余白を 0 にして、間隔は前のブロックの下余白だけで決める。
   （既存記事の見出しは .bge-title-h2 / .bge-title-h3 が上余白を 0 にしていて、
    同じ形になっている。）
   ## この一覧に無いブロック
*
   引用・リスト・画像などよく使うものは入れてあるが、コード・詩・
   ギャラリーなどは core の既定スタイルを使用する。 */

/* 移行元BaserCMSと同じく、各記事の連続する段落は
   1 文字分空ける。固定ページのデザインには適用しない。 */
body:is(.update-archives, .news-archives, .example-archives, .column-archives, .document-form-archives, .webinar-detail) .c-content-main p + p {
  margin-top: 1em;
}

/* 導入事例の会社情報帯を、内容の長さに合わせて必要な分だけ広げる。 */
@media (min-width: 768px) {
  body.example-archives .example-head-image .bgt-grid--last .bge-ckeditor {
    min-width: 47.2727272727%;
    max-width: 100%;
    width: fit-content;
  }

  body.example-archives .example-head-image .bgt-grid--last .bge-ckeditor p {
    white-space: nowrap;
  }
}

.c-content-main > p,
.c-content-main > .wp-block-list,
.c-content-main > .wp-block-image,
.c-content-main > .wp-block-buttons,
.c-content-main > .wp-block-columns,
.c-content-main > .wp-block-embed,
.c-content-main > .wp-block-media-text,
.c-content-main > .wp-block-quote,
.c-content-main > .wp-block-table {
  margin-bottom: 3em;
}

/* style_org.css / bge_style_org.css の
   `.c-content-main p:last-child { margin-bottom: 0 }` はクラス 2 つ分の詳細度で、
   上の `.c-content-main > p`（クラス 1 つ分）に勝つ。そのままだと記事の
   最後の段落だけ下余白が消える。既存記事では最後の箱にも 3em が付くので、
   詳細度を合わせて打ち消しておく。 */
.c-content-main > p:last-child {
  margin-bottom: 3em;
}

/* 上余白を 0 にする（理由は上のコメント）。
   見出しは style_org.css の `.c-content-main h2` などと詳細度が同じなので、
   後に読まれるこのファイルで勝つ（読み込み順は inc/block-assets.php）。
   767px 以下の vw 指定も同じ詳細度なので、幅によらず 0 になる。
   区切り線は上下 50px を持っているが、上は前のブロックの 3em に任せる。

   箇条書きが入っているのは style_org.css の
   `.c-content-main p + ul, .c-content-main p + ol { margin-top: 1em }` のため。
   段落の直後に置いたときだけ 17px 付き、他のブロックの後では付かない。
   トップレベルでは「前のブロックの下余白だけで間隔が決まる」に揃えるので消す
   （箱の中では今までどおり 17px。既存記事の見え方はそのまま）。
   `>` とクラス 2 つ分でその規則（クラス 1 つ＋要素 2 つ）に勝つ。
   1 文の直後に詰めて箇条書きを置きたいときは、段落の「下の余白」を
   「狭い」（1.5em。コラムなら 25.5px）にすれば近い形になる。 */
.c-content-main > h2,
.c-content-main > h3,
.c-content-main > h4,
.c-content-main > h5,
.c-content-main > h6,
.c-content-main > .wp-block-list,
.c-content-main > .wp-block-separator {
  margin-top: 0;
}

/* 移行元で箇条書きの項目間に改行があった箇所の間隔。 */
.c-content-main .wp-block-list > .bqey-list-item-gap-after {
  margin-bottom: 1em;
}

.c-content-main :is(p, h2, h3, h4, h5, h6, .wp-block-image, .wp-block-table, .wp-block-embed, .wp-block-columns, .wp-block-buttons, .wp-block-media-text, .wp-block-separator).bgb-opt--mb-large {
  margin-bottom: 6em;
}

.c-content-main :is(p, h2, h3, h4, h5, h6, .wp-block-image, .wp-block-table, .wp-block-embed, .wp-block-columns, .wp-block-buttons, .wp-block-media-text, .wp-block-separator).bgb-opt--mb-small {
  margin-bottom: 1.5em;
}

.c-content-main :is(p, h2, h3, h4, h5, h6, .wp-block-image, .wp-block-table, .wp-block-embed, .wp-block-columns, .wp-block-buttons, .wp-block-media-text, .wp-block-separator).bgb-opt--mb-none {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .c-content-main.c-content-main .bgb-opt--mb-large,
  .bge-contents.bge-contents .bgb-opt--mb-large {
    margin-bottom: 60px !important;
  }

  .c-content-main.c-content-main .bgb-opt--mb-small,
  .bge-contents.bge-contents .bgb-opt--mb-small {
    margin-bottom: 15px !important;
  }

  .c-content-main.c-content-main .bgb-opt--mb-none,
  .bge-contents.bge-contents .bgb-opt--mb-none {
    margin-bottom: 0 !important;
  }
}

.c-content-main .wp-block-group.has-background {
  padding: 2.5em 3em;
}

@media (max-width: 767px) {
  .c-content-main .wp-block-group.has-background {
    padding: 4.8vw 5.8666666667vw;
  }
}


/* 見出し列付きの表（パターン「表（見出し列付き）」「導入事例：会社情報の表」）。
   core/table は「追加CSSクラス」を **figure** に付けるので、
   `table` 要素を要求する既存セレクタが届かない。その分を橋渡しする。
   *
   届かないもの
     :where(table).bge-type-table … 狭い画面で 1 行ずつ縦に積む指定
     （style_org.css。576px 以下で table/tbody/tr を block に、
       767px 以下で td・th を block・width:100%!important・margin-top:-1px）
     .bge-type-table th{width:25%} / td{width:75%}（baser-bge-default.css）
   *
   overflow を visible に戻すのは、core の `.wp-block-table{overflow-x:auto}` を
   打ち消すため。移行前の表は入れ物が overflow:visible で、狭い画面では
   横スクロールではなく 1 行ずつ縦に積む形（下の 2 つの @media）だった。 */
.c-content-main .wp-block-table.bge-type-table {
  overflow: visible;
}

.c-content-main .wp-block-table.bge-type-table > table th {
  width: 25%;
}

.c-content-main .wp-block-table.bge-type-table > table td {
  width: 75%;
}

@media (max-width: 767px) {
  .c-content-main .wp-block-table.bge-type-table > table td,
  .c-content-main .wp-block-table.bge-type-table > table th {
    display: block;
    margin-top: -1px;
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .c-content-main .wp-block-table.bge-type-table > table,
  .c-content-main .wp-block-table.bge-type-table > table tbody,
  .c-content-main .wp-block-table.bge-type-table > table tr {
    display: block;
  }

  .c-content-main .wp-block-table.bge-type-table > table thead,
  .c-content-main .wp-block-table.bge-type-table > table tfoot {
    display: none;
  }
}

.c-content-main .example-head-text > .wp-block-group__inner-container,
.c-content-main .example-outline > .wp-block-group__inner-container {
  display: contents;
}

/* 会社ロゴが未指定な導入事例は、空のロゴ欄を公開画面だけでトルツメする。
   編集画面には画像選択欄を残すため、.c-content-main の内側だけを対象にする。 */
.c-content-main .example-head-text:not(:has(.bgt-grid--first img[src]))
  > .wp-block-group__inner-container > .bgt-grid--first {
  display: none;
}

.c-content-main .example-head-text:not(:has(.bgt-grid--first img[src]))
  > .wp-block-group__inner-container > .bgt-grid--last {
  border-radius: 20px;
  max-width: 100%;
}

/* 導入事例の「課題と効果」の行（パターン。inc/block-patterns.php）。
   セレクタに .wp-block-group__inner-container を挟んでいるので、
   既存の core/html の本文（.bgt-container を挟む形）には当たらない。 */
.c-content-main .wp-block-group.example-outline {
  flex-wrap: wrap;
}

.c-content-main .example-outline > .wp-block-group__inner-container > .bgt-grid + .bgt-grid {
  margin-left: 40px;
}

@media (max-width: 767px) {
  .c-content-main .example-outline > .wp-block-group__inner-container > .bgt-grid + .bgt-grid {
    margin-left: 0;
    margin-top: 5.3333333333vw;
  }
}

/* ボタンのバリエーション（inc/block-styles.php で登録）。
   Bqey の「ボタン」ブロックをインサーターから外した代わりに、
   core のボタンで「強調（塗り）」「戻る」を選べるようにする。 */
.c-content-main .wp-block-button.is-style-bqey-em .wp-block-button__link {
  background: #004ea2;
  color: #fff;
}

@media (hover: hover) {
  .c-content-main .wp-block-button.is-style-bqey-em .wp-block-button__link:hover {
    background: #222633;
    border-color: #222633;
    color: #fff;
  }
}

/* 「戻る」は標準の右向き矢印を消し、左向き矢印を表示する。 */
.c-content-main .wp-block-button.is-style-bqey-back .wp-block-button__link::after {
  display: none;
}

.c-content-main .wp-block-button.is-style-bqey-back .wp-block-button__link::before {
  border: 2px solid;
  border-width: 0 0 2px 2px;
  bottom: 0;
  content: "";
  display: block;
  height: 9px;
  left: 20px;
  margin-bottom: auto;
  margin-top: auto;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  width: 9px;
}

/* 区切り線のバリエーション（inc/block-styles.php で登録）。
   標準スタイルは既存の `.c-content-main hr` を使用する。 */
.c-content-main hr.wp-block-separator.is-style-bqey-dashed {
  background: none;
  border-bottom: 2px dashed;
  height: 0;
}

.c-content-main hr.wp-block-separator.is-style-bqey-bold {
  height: 5px;
}

.c-content-main hr.wp-block-separator.is-style-bqey-narrow {
  height: 1px;
}

.c-content-main hr.wp-block-separator.is-style-bqey-short {
  height: 1px;
  width: 60%;
}

/* カラム（core/columns）の列と列のあいだ。
   縦積み（コアの `@media(max-width:781px)` で flex-basis:100%）になったときは
   gap が行間として効くため row 側は 2em にする。既存は SP で行間の指定を持たず
   中の要素の margin だけに任せているが、それだと段落と段落の切れ目が
   同じ列の中の改行と区別できない。
   ここが当たるのは新しく挿したカラムだけ。 */
.c-content-main .wp-block-columns {
  column-gap: 40px;
  row-gap: 2em;
}

.c-content-main .wp-block-media-text > .wp-block-media-text__content {
  padding: 0 0 0 40px;
}

.c-content-main .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  padding: 0 40px 0 0;
}

/* 縦積みに切り替わる幅をサイトのブレークポイントに揃える。
   grid-template-columns に !important が要るのは、上に書いた
   インラインの grid-template-columns を上回るため。 */
@media (max-width: 767px) {
  .c-content-main .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }

  .c-content-main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }

  .c-content-main .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
    margin-top: 5.3333333333vw;
    padding: 0;
  }
}

/* 本文の画像（core/image）を中央寄せのブロック要素にする。
   移行前の画像ブロックは
   `.bgt-image-link__link .bgt-box__image-container img
     { display:block; max-width:100%; height:auto; margin:0 auto }`
   と `.bgt-image-link__link{display:block}` で、
   **リンクも画像も幅いっぱいの箱にして画像を中央へ置いていた**。
   *
   この2つの規則（assets/css/baser-bge-default.css）は
   `lazyblock/bge-*` を含む記事にしか読まれない（inc/block-assets.php）。
   標準の core/image に置き換えた記事では読まれなくなるので、
   ここに写しておかないと画像の位置が変わる（bgb-opt--mb-* と同じ落とし穴）。
   *
   WordPress 6.7 以降は公開時に `.wp-block-image > figure` の形に
   包み直すため、保存HTMLと公開HTMLの両方に限定して当てる。 */
.c-content-main figure.wp-block-image > a,
.c-content-main .wp-block-image > figure > a {
  display: block;
  /* 互換ブロックの `.bgt-image-link__link{position:relative;z-index:1}` と揃える。
     ずらす指定が無いので位置も大きさも変わらないが、重ね順の基準
     （スタッキングコンテキスト）を作るかどうかが変わる。
     互換表示と同じにしておく。 */
  position: relative;
  z-index: 1;
}

.c-content-main figure.wp-block-image > img,
.c-content-main figure.wp-block-image > a > img,
.c-content-main .wp-block-image > figure > img,
.c-content-main .wp-block-image > figure > a > img {
  display: block;
  margin-inline: auto;
}

/* 別タブで開く画像リンクに「外部リンク」の印を出さない。
   コアと同じ 2 通りの形（寄せていない figure 直下と、
   寄せたときに包み替えられる div > figure 直下）に当てる。
   説明文（figcaption）の中のリンクには当てない。そちらは文字なので
   印を表示する。 */
.c-content-main figure.wp-block-image > a[target="_blank"]::after,
.c-content-main .wp-block-image > figure > a[target="_blank"]::after {
  display: none;
}

/* 画像の左寄せ・右寄せ（文章が回り込む形）。
   コアは `.wp-block-image .alignleft`（**子孫**）にしか float を書いていない。
   本文の入れ物にレイアウトのクラスが付かないので
   `:where(.is-layout-flow) > .alignleft` も当たらず、そのままでは回り込まない。
   *
     編集画面: <figure class="wp-block-image alignleft size-large">
     公開ページ: <div class="wp-block-image"><figure class="alignleft size-large">
   *
   回り込むのは流れの中にある**外側の div** なので、そちらを float する
   （中の figure を float しても div が幅いっぱいの箱として残り、
    後ろの文章は回り込まない）。寄せていない画像は包まれないので当たらない。
   SP では回り込みを外す。編集画面側は assets/css/editor-style.css に
   figure 用の形で定義している。 */
.c-content-main :is(.wp-block-group, .wp-block-column) .wp-block-image:has(> .alignleft) {
  float: left;
  margin: 0 40px 20px 0;
}

.c-content-main :is(.wp-block-group, .wp-block-column) .wp-block-image:has(> .alignright) {
  float: right;
  margin: 0 0 20px 40px;
}

@media (max-width: 767px) {
  .c-content-main :is(.wp-block-group, .wp-block-column) .wp-block-image:has(> .alignleft),
  .c-content-main :is(.wp-block-group, .wp-block-column) .wp-block-image:has(> .alignright) {
    float: none;
    margin: 0 0 20px;
  }

  .c-content-main .wp-block-image > .alignleft,
  .c-content-main .wp-block-image > .alignright {
    float: none;
    margin-inline: 0;
  }
}

.c-content-main .wp-block-group:has(.alignleft),
.c-content-main .wp-block-group:has(.alignright),
.c-content-main .wp-block-column:has(.alignleft),
.c-content-main .wp-block-column:has(.alignright) {
  display: flow-root;
}

/* ボタン。サイトの .bgt-btn（白地・青の2px枠・角丸35px・右向きの矢印）に合わせる。
   core のボタンは塗りつぶしの角丸なので、そのままでは既存のボタンと揃わない。 */
.c-content-main .wp-block-buttons {
  justify-content: center;
}

.c-content-main .wp-block-button {
  text-align: center;
}

.c-content-main .wp-block-button__link {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: 2px solid #004ea2;
  border-radius: 35px;
  color: #004ea2;
  display: inline-block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.6;
  max-width: 600px;
  min-width: 250px;
  padding: 1.2em 2.2em 1.3em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, color .2s;
  vertical-align: middle;
}

.c-content-main .wp-block-button__link:hover {
  background: #004ea2;
  color: #fff;
}

.c-content-main .wp-block-button__link::after {
  border: 2px solid;
  border-width: 2px 2px 0 0;
  bottom: 0;
  content: "";
  display: block;
  height: 9px;
  margin-bottom: auto;
  margin-top: auto;
  position: absolute;
  right: 20px;
  top: 0;
  transform: rotate(45deg);
  width: 9px;
}

@media screen and (max-width: 768px) {
  .c-content-main .wp-block-button__link {
    min-width: 66.6667vw;
  }
}

/* ---------------------------------------------------------------------------
   BaserCMS互換ブロックから標準ブロックへ移した記事レイアウト。

   保存形式は core/image・core/columns・core/buttons・core/group だが、
   旧記事で指定されていた列幅、間隔、回り込み、装飾をクラスで保持する。
   通常の標準ブロックには当たらないため、新規記事の自由なレイアウトを妨げない。 */

.c-content-main :is(.bqey-article-image, .bqey-article-image-grid, .bqey-article-image-text, .bqey-article-text-columns, .bqey-article-buttons, .bqey-article-table, .bqey-article-embed) {
  margin-bottom: 3em;
}

.c-content-main hr.bqey-article-separator {
  margin: 0 auto 3em;
}

.c-content-main .bqey-article-image-text > .wp-block-group__inner-container,
.c-content-main .bqey-article-rich-text > .wp-block-group__inner-container {
  display: contents;
}

.c-content-main .bqey-article-image-text > .wp-block-columns,
.c-content-main .bqey-article-image-text > .wp-block-group__inner-container > .wp-block-columns,
.c-content-main .bqey-article-image-text .bqey-article-rich-text,
.c-content-main .bqey-article-image-text .bqey-article-rich-text > :last-child {
  margin-bottom: 0;
}

.c-content-main .bqey-article-image-text .bqey-article-image {
  margin-bottom: 0;
}

.c-content-main .bqey-article-image-grid .bqey-article-image {
  margin-bottom: 0;
}

.c-content-main .bqey-article-image-grid {
  column-gap: 40px;
  row-gap: 5.3333333333vw;
}

.c-content-main .bqey-article-image-grid > .wp-block-column,
.c-content-main .bqey-article-image-text__cards > .wp-block-column,
.c-content-main .bqey-article-text-columns > .wp-block-column {
  min-width: 0;
}

.c-content-main .bqey-article-image-text__columns {
  column-gap: 40px;
  row-gap: 5.3333333333vw;
}

.c-content-main .bqey-article-image-text__cards--2 {
  column-gap: 40px;
}

.c-content-main .bqey-article-image-text__cards--3 {
  column-gap: 30px;
}

.c-content-main .bqey-article-image-text__cards {
  row-gap: 3em;
}

/* 旧画像ブロックのキャプションには上下余白がなかった。
   core/image の既定値（上 .5em・下 1em）を移行済み画像だけで戻す。 */
.c-content-main figure.bqey-article-image > figcaption,
.c-content-main .wp-block-image > figure.bqey-article-image > figcaption,
.c-content-main .wp-block-image.bqey-article-image > figure > figcaption {
  margin: 0;
}

/* 旧画像ブロックはキャプションもリンク内だった。
   標準ブロックの有効な保存形式（リンクとキャプションは兄弟）を
   保ったまま、キャプションを含む figure 全体をクリック領域にする。 */
.c-content-main figure.bqey-article-image:has(> a + figcaption),
.c-content-main .wp-block-image > figure.bqey-article-image:has(> a + figcaption),
.c-content-main .wp-block-image.bqey-article-image > figure:has(> a + figcaption) {
  position: relative;
}

.c-content-main figure.bqey-article-image:has(> a + figcaption) > a,
.c-content-main .wp-block-image > figure.bqey-article-image:has(> a + figcaption) > a,
.c-content-main .wp-block-image.bqey-article-image > figure:has(> a + figcaption) > a {
  position: static;
}

.c-content-main figure.bqey-article-image:has(> a + figcaption) > a::before,
.c-content-main .wp-block-image > figure.bqey-article-image:has(> a + figcaption) > a::before,
.c-content-main .wp-block-image.bqey-article-image > figure:has(> a + figcaption) > a::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.c-content-main .bqey-article-text-columns {
  column-gap: 40px;
  row-gap: 5.3333333333vw;
}

.c-content-main .bqey-article-buttons--2 {
  column-gap: 40px;
  row-gap: 5.3333333333vw;
}

.c-content-main .bqey-article-buttons--2 > .wp-block-button {
  max-width: calc(50% - 20px);
}

.c-content-main .bqey-article-buttons--2 .wp-block-button__link {
  width: 100%;
}

.c-content-main .bqey-article-image-link a {
  transition: opacity .3s;
}

@media (hover: hover) {
  .c-content-main .bqey-article-image-link a:hover {
    opacity: .7;
  }
}

@media (min-width: 769px) {
  .c-content-main :is(.bqey-article-image-grid, .bqey-article-image-text__columns, .bqey-article-image-text__cards, .bqey-article-text-columns) {
    flex-wrap: nowrap !important;
  }

  .c-content-main .bqey-article-image-text__columns > .wp-block-column,
  .c-content-main .bqey-article-text-columns > .wp-block-column {
    flex-grow: 0;
  }

  /* 旧カードの画像と文章の間隔（15px）を保つ。 */
  .c-content-main .bqey-article-image-text__cards .bqey-article-rich-text {
    margin-top: 15px;
  }

  .c-content-main .bqey-article-image-text__columns--grid-1 {
    --bqey-image-column: calc(8.3333333333% - 20px);
    --bqey-text-column: calc(91.6666666667% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-2 {
    --bqey-image-column: calc(16.6666666667% - 20px);
    --bqey-text-column: calc(83.3333333333% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-3 {
    --bqey-image-column: calc(25% - 20px);
    --bqey-text-column: calc(75% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-4 {
    --bqey-image-column: calc(33.3333333333% - 20px);
    --bqey-text-column: calc(66.6666666667% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-5 {
    --bqey-image-column: calc(41.6666666667% - 20px);
    --bqey-text-column: calc(58.3333333333% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-6 {
    --bqey-image-column: calc(50% - 20px);
    --bqey-text-column: calc(50% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-7 {
    --bqey-image-column: calc(58.3333333333% - 20px);
    --bqey-text-column: calc(41.6666666667% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-8 {
    --bqey-image-column: calc(66.6666666667% - 20px);
    --bqey-text-column: calc(33.3333333333% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-9 {
    --bqey-image-column: calc(75% - 20px);
    --bqey-text-column: calc(25% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-10 {
    --bqey-image-column: calc(83.3333333333% - 20px);
    --bqey-text-column: calc(16.6666666667% - 20px);
  }
  .c-content-main .bqey-article-image-text__columns--grid-11 {
    --bqey-image-column: calc(91.6666666667% - 20px);
    --bqey-text-column: calc(8.3333333333% - 20px);
  }

  .c-content-main .bqey-article-image-text__columns--image-left > .wp-block-column:first-child,
  .c-content-main .bqey-article-image-text__columns--image-right > .wp-block-column:last-child {
    flex-basis: var(--bqey-image-column) !important;
  }

  .c-content-main .bqey-article-image-text__columns--image-left > .wp-block-column:last-child,
  .c-content-main .bqey-article-image-text__columns--image-right > .wp-block-column:first-child {
    flex-basis: var(--bqey-text-column) !important;
  }

  .c-content-main .bqey-article-image-text--float-left .wp-block-image.bqey-article-image,
  .c-content-main .bqey-article-image-text--float-right .wp-block-image.bqey-article-image {
    margin-bottom: 5px;
  }

  .c-content-main .bqey-article-image-text--float-left .wp-block-image.bqey-article-image {
    float: left;
    margin-right: 40px;
  }

  .c-content-main .bqey-article-image-text--float-right .wp-block-image.bqey-article-image {
    float: right;
    margin-left: 40px;
  }

  .c-content-main .bqey-article-image-text--grid-1 .wp-block-image.bqey-article-image { width: 8.3333333333%; }
  .c-content-main .bqey-article-image-text--grid-2 .wp-block-image.bqey-article-image { width: 16.6666666667%; }
  .c-content-main .bqey-article-image-text--grid-3 .wp-block-image.bqey-article-image { width: 25%; }
  .c-content-main .bqey-article-image-text--grid-4 .wp-block-image.bqey-article-image { width: 33.3333333333%; }
  .c-content-main .bqey-article-image-text--grid-5 .wp-block-image.bqey-article-image { width: 41.6666666667%; }
  .c-content-main .bqey-article-image-text--grid-6 .wp-block-image.bqey-article-image { width: 50%; }
  .c-content-main .bqey-article-image-text--grid-7 .wp-block-image.bqey-article-image { width: 58.3333333333%; }
  .c-content-main .bqey-article-image-text--grid-8 .wp-block-image.bqey-article-image { width: 66.6666666667%; }
  .c-content-main .bqey-article-image-text--grid-9 .wp-block-image.bqey-article-image { width: 75%; }
  .c-content-main .bqey-article-image-text--grid-10 .wp-block-image.bqey-article-image { width: 83.3333333333%; }
  .c-content-main .bqey-article-image-text--grid-11 .wp-block-image.bqey-article-image { width: 91.6666666667%; }
}

@media (max-width: 768px) {
  .c-content-main :is(.bqey-article-image-grid, .bqey-article-image-text__columns, .bqey-article-image-text__cards, .bqey-article-text-columns) {
    flex-direction: column;
    flex-wrap: nowrap !important;
  }

  .c-content-main :is(.bqey-article-image-grid, .bqey-article-image-text__columns, .bqey-article-image-text__cards, .bqey-article-text-columns) > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
  }

  .c-content-main .bqey-article-image-grid,
  .c-content-main .bqey-article-image-text__columns,
  .c-content-main .bqey-article-text-columns,
  .c-content-main .bqey-article-buttons--2 {
    row-gap: 5.3333333333vw;
  }

  .c-content-main .bqey-article-image-text__cards {
    row-gap: 3em;
  }

  .c-content-main .bqey-article-image-text__cards .bqey-article-rich-text {
    margin-top: 5.3333333333vw;
  }

  .c-content-main .bqey-article-buttons--2 {
    align-items: center;
    flex-direction: column;
  }

  .c-content-main .bqey-article-buttons--2 > .wp-block-button {
    max-width: 100%;
  }

  .c-content-main .bqey-article-image-text--float-left .wp-block-image.bqey-article-image,
  .c-content-main .bqey-article-image-text--float-right .wp-block-image.bqey-article-image {
    float: none;
    margin: 0;
    width: 100%;
  }

  .c-content-main .bqey-article-image-text--float-left .bqey-article-rich-text,
  .c-content-main .bqey-article-image-text--float-right .bqey-article-rich-text {
    margin-top: 5.3333333333vw;
  }
}