:root {
  @include renderSize();
}

:where(llm-embed) {
  display: block;
  width: 100%;
  height: 760px;
  max-height: 100vh;
  background: transparent;
  overflow: clip;
  border-radius: 10px;
}

:where(.llm__row) {
  --grid-columns: var(--llm-grid-columns, 12);
  --grid-size: var(--llm-grid-size, 1fr);
  --grid-column-gap: var(--llm-grid-column-gap, var(--gap));
  --grid-row-gap: var(--llm-grid-row-gap, var(--gap));
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
  grid-column-gap: var(--grid-column-gap);
  grid-row-gap: var(--grid-row-gap);
}

:where(.llm__col) {
  --grid-column: var(--llm-grid-columns, 12);
  grid-column: span var(--grid-column);
}

:where(.llm__container) {
  padding: 0 clampUnit(20, 110);
}

@each $key, $value in $breakpoints {
  @for $i from 1 through 12 {
    .--#{$key}-#{$i} {
      @if $key =="xs" {
        --grid-column: #{$i};
      }

      @else {
        @include cbp(#{$key}) {
          --grid-column: #{$i};
        }
      }
    }

    .--end-#{$key}-#{$i} {
      @if $key =="xs" {
        grid-column-end: #{$i + 1};
      }

      @else {
        @include cbp(#{$key}) {
          grid-column-end: #{$i + 1};
        }
      }
    }
  }
}