.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space, var(--spacing-5) var(--spacing-16));
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;

  & > * {
    flex-shrink: 0;
  }

  &.cluster-center {
    justify-content: center;
  }
  &.cluster-center-mobile {
    @media (width < 50rem) {
      justify-content: center;
    }
  }
  &.cluster-sb {
    justify-content: space-between;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space, var(--spacing-20));

  &.stack-center {
    align-items: center;
  }
}

.content-text {
  --t-space: var(--spacing-20);

  margin-block-start: var(--spacing-20);
  font: var(--font-text-20);

  :where(h2, h3, h4, h5, h6) {
    margin-block-start: calc(1lh + var(--t-space));
  }
  & > :where(h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  :where(p, blockquote, picture, img, figure, ul, ol, table, div, address):not(:first-child) {
    margin-block-start: var(--t-space);
  }

  ul ul:not(:first-child) {
    margin-block-start: 0;
  }

  li {
    list-style: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle fill='%23FF52AB' cx='8' cy='8' r='8'></circle><circle fill='white' cx='8' cy='8' r='7'></circle><circle fill='%23E11A81' cx='8' cy='8' r='3'></circle></svg>");
  }

  li li {
    list-style: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect fill='%23FF52AB' width='16' height='16'></rect><rect fill='white' width='14' height='14' x='1' y='1'></rect><rect fill='%23E11A81' width='6' height='6' x='5' y='5'></rect></svg>");
  }

  li li li {
    list-style: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle fill='%23FF52AB' cx='8' cy='8' r='8'></circle><circle fill='white' cx='8' cy='8' r='7'></circle><circle fill='%23E11A81' cx='8' cy='8' r='3'></circle></svg>");
  }

  a {
    color: var(--color-pink);
    transition: color var(--transition);

    &:not([class]) {
        /* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
        overflow-wrap: break-word;
        word-wrap: break-word;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
        hyphens: auto;
    }

    &:is(:hover, :focus) {
      color: var(--color-pink-dark);
    }
  }

  hr {
    margin-block: 2lh;
    border-color: var(--color-grey-6);
    border-style: solid;
  }

  blockquote {
    border-inline-start: 2px solid var(--color-pink);
    padding-inline-start: var(--spacing-40);

    & > :not(:first-child) {
      margin-block-start: var(--t-space);
    }

    & p:not(:has(cite)) {
      font: var(--font-title-22);
      font-weight: 400;
    }

    & p:has(cite) {
      font: var(--font-text-16);
      color: var(--color-grey-3);
    }
  }

  address {
    font-style: normal;
  }

  .table-wrapper {
    max-width: 100%;
    overflow: auto;
    overflow-scrolling: touch;

    background:
      /* Shadow Cover LEFT */
      linear-gradient(
        to right,
        white 20%,
        rgba(255, 255, 255, 0)
      ) center left,
      
      /* Shadow Cover RIGHT */
      linear-gradient(
        to left,
        white 20%, 
        rgba(255, 255, 255, 0)
      ) center right,
      
      /* Shadow LEFT */
      linear-gradient(
        to right,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0)
      ) center left,
      
      /* Shadow RIGHT */
      linear-gradient(
        to left,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0)
      ) center right;
    
    background-repeat: no-repeat;
    background-size:
      var(--spacing-40) 100%,
      var(--spacing-40) 100%,
      var(--spacing-20) 100%,
      var(--spacing-20) 100%;
    background-attachment: local, local, scroll, scroll;
  }

  table {
    border-collapse: collapse;
    margin-inline: calc(-1 * var(--spacing-20));
    min-width: 100%;

    caption {
      padding-inline: var(--spacing-20);
      text-align: start;
    }

    td, th {
      border: 0;
      padding: var(--spacing-10) var(--spacing-20);
    }

    & td {
      vertical-align: top;

      p, ul, ol {
        margin-block: 0;
      }
    }

    & thead th,
    & :where(th, td).header {
      position: relative;
      padding-block-end: var(--spacing-20);
      
      &:after {
        position: absolute;
        inset-block-end: calc(var(--spacing-5));
        inset-inline: 0;
        content: "";
        display: block;
        margin-inline: var(--spacing-10);
        height: var(--spacing-5);
        background: hsla(0deg, 0%, 0%, 0.1);
      }
    }

    tbody th {
      text-align: start;
    }

    & :where(th, td).header {
      padding-block-start: var(--spacing-20);
    }

    & tr:not(:has(.header)):nth-child(even) {
      background: hsla(0deg, 0%, 0%, 0.04);
    }

    & th:not(:first-child),
    & td:not(:first-child) {
      border-left: 2px solid hsla(0deg, 0%, 0%, 0.1);
    }
  }

  @media (width < 50rem) {
    font: var(--font-text-16);    

    blockquote {
      padding-inline-start: var(--spacing-20);

      & p:not(:has(cite)) {
        font: var(--font-title-18);
      }
    }
  }
}

.centered-in-lines {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--lines-gap, var(--spacing-40));
  align-items: center;

  &::before, &::after {
    content: "";
    height: 1px;
    background-color: var(--lines-color, var(--color-grey-6));
  }
}

.grid {
  --cell-size: 272px;
  --cell-gap: var(--spacing-20);

  display: grid;
  gap: var(--cell-gap);

  @supports (width: min(272px, 100%)) {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--cell-size), 100%), 1fr));
  }
}

.clickable-card {
  position: relative;
  z-index: 1;

  & a::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
  }

  & a.clickable-card-over {
    position: relative;

    & a::after {
      inset: -0.25rem;
    }
  }
}