@media all {

  .ce-type-dw_iconteasers {
    --iconteasers-card-row: 1;
    position: relative;
    isolation: isolate;

    &:has(> .ce-header) {
      --iconteasers-card-row: 2;
    }

    .ce-card {
      border-radius: 0;
    }

    & .ce-header .ce-teaser-link-inline {
      font-weight: inherit;
    }

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

    &>.ce-inner {
      --columns: 1;
      grid-gap: var(--page-grid-gap);
      grid-column: 3 / -3;
      grid-row: var(--iconteasers-card-row);
      display: grid;
      grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

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

        & .ce-inner {
          padding-top: var(--element-gap-text);

          & .ce-text {
            --dynamic-size-min: 1.0625;
            --dynamic-size-max: 1.1875;
            text-align: center;
            font-size: var(--dynamic-size-scaler);
          }

          & .ce-header .paragraph {
            --dynamic-size-min: 1.375;
            --dynamic-size-max: 1.875;
            font-size: var(--dynamic-size-scaler);
            line-height: 1.25;
          }

        }

        & .ce-media-svg-mask {
          display: grid;
          justify-content: center;
        }

        & .svg-mask-icon {
          height: var(--size-10);
        }

      }

    }

  }

}

@media (min-width: 30rem) {

  .ce-type-dw_iconteasers {

    &>.ce-inner {
      --columns: 2;
    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_iconteasers {

    &:has(> .ce-inner)::after {
      content: "";
      position: absolute;
      grid-column: 1 / -4;
      grid-row: var(--iconteasers-card-row);
      inset-block-start: 0;
      inset-inline: 0;
      height: var(--size-18);
      background-color: var(--color-cyan);
      z-index: -1;
      pointer-events: none;
    }

    &>.ce-inner {
      padding-block-start: var(--size-6);

      &[data-items-count="2"],
      &[data-items-count="4"] {
        --columns: 2;
      }

      &[data-items-count="3"] {
        --columns: 3;
      }

    }

  }

  .column-full .ce-type-dw_iconteasers {

    &>.ce-inner {

      &[data-items-count="4"] {
        --columns: 4;
      }

    }

  }

}