@media all {

  .ce-type-dw_imageteasers {

    & > .ce-header {
      grid-column: 3 / -3;
      text-align: center;

      & > * {
        --dynamic-size-min: 1.125;
        --dynamic-size-max: 1.5;
        font-size: var(--dynamic-size-scaler);
      }
    }

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

      & > .ce-element-nested.ce-card {
        grid-column: unset;
        display: flex;
        flex-direction: column;
        text-align: center;
        border-radius: var(--radius-small);
        box-shadow: var(--shadow-dark);
        transition: var(--transition-default);
        transition-property: box-shadow, transform;

        & .ce-inner {
          background-color: var(--color-white);
          background-image: none;
          padding: var(--size-5) var(--element-padding);
          border-end-start-radius: var(--radius-small);
          border-end-end-radius: var(--radius-small);
          transition: var(--transition-default);
          transition-property: background-color, background-image, box-shadow;
        }

        & .ce-header,
        & .ce-bodytext,
        & .ce-text {
          color: var(--color-black);
          transition: none;
        }

        & .ce-header > * {
          color: inherit;
          --dynamic-size-min: 1.125;
          --dynamic-size-max: 1.5;
          font-size: var(--dynamic-size-scaler);
        }

        &:hover,
        &:has(a.ce-teaser-link-inline:focus-visible) {
          box-shadow: var(--shadow-default-hover);
          background-color: transparent;
          transform: unset;

          & .ce-inner {
            background-color: transparent;
            background-image: linear-gradient(to right, var(--color-orange), var(--color-orange-light));
          }

          & .ce-text,
          & .ce-header,
          & .ce-bodytext,
          & .ce-header > *,
          & .ce-bodytext :is(p, li, span, a, strong, em) {
            color: var(--color-white);
          }

        }

        & .ce-media {
          position: relative;
          overflow: clip;
          border-start-start-radius: var(--radius-small);
          border-start-end-radius: var(--radius-small);

          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 2;
            bottom: -1px;
            left: 0;
            right: 0;
            width: 100%;
            height: auto;
            aspect-ratio: 1600 / 110;
            background-image: var(--teaser-border-image);
            background-position: center bottom;
            background-size: 100% auto;
            background-repeat: no-repeat;
            pointer-events: none;
          }

          & .ce-gallery,
          & .ce-media-file {
            display: grid;
          }

        }

        & .ce-cta {
          display: flex;
          justify-content: end;
          align-items: end;
          flex-grow: 1;
        }

      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_imageteasers {

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

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

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

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

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

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

    }

  }

}