@media all {

  .ce-type-dw_gallery {

    & .ce-inner ,
    & .ce-media {
      grid-column: 3 / -3;
    }

    & .ce-gallery {
      --slides-per-view: 4;
      --columns: 4;
      display: grid;
      gap: var(--page-grid-gap);
      grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

      &[data-ce-images="1"] ,
      &[data-ce-images="2"] {
        --slides-per-view: 3;
        --columns: 2;
      }

      &[data-ce-images="3"] ,
      &[data-ce-images="5"] ,
      &[data-ce-images="6"] ,
      &[data-ce-images="9"] {
        --slides-per-view: 3;
        --columns: 3;
      }

      &.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-media-file img {
            transition: var(--transition-default);
            transition-property: filter, opacity;
          }

          &:not(.swiper-slide-visible) {

            & .ce-media-file {
              overflow: clip;

              & img {
                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;
            padding-inline: var(--page-grid-gap);

            & .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);
              }

            }

          }

        }

      }

    }

    & .ce-media-file {
      align-self: start;

      & img {
        border-radius: var(--radius-medium);
        overflow: clip;        
      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_gallery .ce-gallery {
    --slides-per-view: 3;
  }

}