/*
 * CType "texticon" (Figma 77:418 / 3177:24897 centered, 1260:12738 horizontal).
 * The frame wrapper (Default layout) is the query container: narrow (grid column) = icon above centered text,
 * wide = icon left of left-aligned text. Headline size follows the chosen header_layout. The hexagon is part of the chosen SVG (hexicon-*.svg).
 */
@layer molecules {
  .frame-type-texticon {
    container-type: inline-size;
  }
  .frame-type-texticon.frame-space-after-small:not(:is(.bgm-accordion, .bgm-tabs) *) {
    --texticon-space: var(--section-gap);
  }
  .frame-type-texticon.frame-space-after-medium:not(:is(.bgm-accordion, .bgm-tabs) *) {
    --texticon-space: var(--section-padding-default);
  }
  .frame-type-texticon.frame-space-after-large:not(:is(.bgm-accordion, .bgm-tabs) *) {
    --texticon-space: var(--section-padding-highlight);
  }
  .texticon {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    text-align: start;
  }
  .texticon__icon {
    block-size: 7.75rem;
    flex: none;
    inline-size: auto;
  }
  .texticon__body > :last-child {
    margin-block-end: 0;
  }
  @container (min-width: 25rem) {
    .texticon {
      align-items: center;
      gap: var(--gap-l);
      text-align: center;
    }
  }
  @container (min-width: 36rem) {
    .texticon {
      align-items: flex-start;
      flex-direction: row;
      gap: var(--gap-l);
      text-align: start;
    }
    .frame-type-texticon:has(+ .frame-type-texticon) > .texticon {
      position: relative;
    }
    .frame-type-texticon:has(+ .frame-type-texticon) > .texticon::after {
      border-block-end: 1px solid var(--shade-grey-100);
      content: "";
      inline-size: 100%;
      inset-block-end: calc(var(--texticon-space, 0px) / -2);
      position: absolute;
    }
  }
}