/* BXYZ:..:eliot@bosmanxyz.xyz:..:.www.bosmanxyz.xyz */

@layer components {
  [data-komponent="textblock"] > .brod {
    max-inline-size: none;
  }

  @media (min-width: 64rem) {
    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"]:not([data-kolumn]),
    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="ab"] {
      grid-column: 1 / span 2;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-2);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="a"] {
      grid-column: 1 / span 1;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-1);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="b"] {
      grid-column: 2 / span 1;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-1);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="c"] {
      grid-column: 3 / span 1;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-1);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="d"] {
      grid-column: 4 / span 1;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-1);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="e"] {
      grid-column: 5 / span 1;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-1);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"][data-kolumn="f"] {
      grid-column: 6 / span 1;
      justify-self: start;
      align-self: start;
      max-inline-size: var(--span-1);
      min-inline-size: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-komponent="textblock"] > .brod {
      padding-inline: 0;
    }

    html[data-huvud="skrivbord"] .ram [data-nod="about"] [data-komponent="textblock"] > .brod {
      color: var(--text-om);
    }
  }
}