@media all {

  .ce-type-dw_teamgrid {
    --cell-padding: var(--size-2);
    --border: var(--border-width) solid var(--color-lightgray);
    --cols-locations-mode: grid;
    --cols-locations: 1;
    --cols-persons: 2;
    --cols-gap: var(--size-4);
    --cell-min-height: unset;

    & > .ce-header {
      grid-column: 3 / -3;      
    }

    & > .ce-inner {
      grid-row-gap: var(--element-gap);
      grid-column-gap: var(--cols-gap);
      grid-column: 3 / -3;
      display: grid;

      & > .ce-element-nested {
        grid-column: unset;
        display: flex;
        flex-direction: column;

        & > .ce-text {
          gap: unset;

          & .ce-header > * {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;

            & .ce-accordion-button {
              position: static;
              width: auto;
              height: 2em;
              aspect-ratio: 1;
              display: grid;
              place-content: center;
              margin-right: var(--size-1);
              border: 1px solid rgba(from currentColor r g b / .25);

              &::before {
                content: "";
                position: absolute;
                inset: 0;
              }

              &[aria-expanded="false"] .state-open ,
              &[aria-expanded="true"] .state-closed {
                display: none;
              }

            }

          }

          & .ce-teamgrid {
            padding-top: var(--element-gap-text-block);
            display: var(--cols-locations-mode);
            grid-template-columns: repeat(var(--cols-persons), minmax(0, 1fr));
            grid-column-gap: var(--cols-gap);
            column-count: var(--cols-locations);

            & .ce-teamgrid-person {
              display: block;
              border-top: var(--border);
              gap: unset;
              padding-block: var(--cell-padding);
              min-height: var(--cell-min-height);
              break-inside: avoid;
            }

          }

        }

      }

    }

  }

}

@media (min-width: 47.5rem) {

  .ce-type-dw_teamgrid {
  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_teamgrid {
    --cols-persons: 3;
  }

}

@media (min-width: 90rem) {

  /* mimik print layout */

  .ce-type-dw_teamgrid {
    --cols-locations-mode: block;
    --cols-persons: 3;
    --cell-min-height: calc(var(--cell-padding) * 4 + 3.5em);

    & > .ce-inner {      
      grid-template-rows: repeat(2, auto);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-column-gap: calc(var(--cols-gap) * 2);

      & > .ce-element-nested {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;

        & > .ce-text {
          display: grid;
          grid-template-rows: subgrid;
          grid-row: span 2;
          gap: 0;
        }        

      }

      & > .ce-element-nested:nth-child(1) {
        --cols-locations: 3;
        grid-column: span 3;
      }

      & > .ce-element-nested:nth-child(2) {
        --cols-locations: 1;
        grid-column: span 1;
      }

    }

  }

}