@media all {

  .ce-type-dw_pageteaser {
    --slides-per-view: 1;
    --columns: 1;
    grid-column: 1 / -1;

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

    & .ce-nested-container {
      grid-column: 3 / -3;
      display: grid;
      grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
      gap: var(--element-gap-small);

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

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

      }

    }

    & > .swiper {
      grid-template-columns: minmax(0, 1fr);
      margin-inline: calc(var(--page-grid-gap) * -1 / 2);
      overflow: visible;

      & .swiper-slide {
        padding-inline: calc(var(--page-grid-gap) * 1 / 2);
        box-sizing: border-box;
        display: grid;

        & .ce-inner ,
        & .ce-media {
          transition: var(--transition-default);
          transition-property: filter opacity;
        }

        &:not(.swiper-slide-visible) .ce-element-nested {

          & .ce-inner ,
          & .ce-media {
            filter: blur(.125em) saturate(.5);
            opacity: .5;            
          }

        }

      }

      & .swiper-controls {
        padding-inline: calc(var(--page-grid-gap) * 1 / 2);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;

        & .swiper-button {
          padding: 0;
          height: var(--size-7);
          aspect-ratio: 1;
          box-sizing: content-box;
        }

        & .swiper-pagination {
          position: relative;
          inset: unset;
          display: flex;
          justify-content: center;

          & .swiper-pagination-bullet {
            display: block;
            width: auto;
            height: 1rem;
            aspect-ratio: 1;
            background-color: transparent;
            border: var(--border-width) solid var(--current-text-color);
            opacity: 1;

            &.swiper-pagination-bullet-active {
              background-color: var(--current-text-color);
            }

            &:focus ,
            &:hover {
              background-color: var(--current-button-hover-background);
              border-color: var(--current-button-hover-background);
            }

            &:focus-visible {
              outline: none;
              box-shadow: var(--shadow-focus);
            }

          }

        }

      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_pageteaser {
    --slides-per-view: 3;
    --columns: 3;
    
    &:has(.ce-nested-container[data-items-count="1"]) ,
    &:has(.ce-nested-container[data-items-count="2"]) ,
    &:has(.ce-nested-container[data-items-count="4"]) {
      --columns: 2;
    }
    
  }

}

@media (min-width: 105rem) {

  .ce-type-dw_pageteaser {

    & .swiper-controls {

      & .swiper-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;

        &.swiper-prev {
          right: 100%;
          margin-right: calc(var(--page-grid-gap) * 3 / 2)
        }

        &.swiper-next {
          left: 100%;
          margin-left: calc(var(--page-grid-gap) * 3 / 2)
        }

      }

    }

  }

}