@media all {

  .ce-type-dw_gallery {
    --controls-gap: calc(var(--size-1) * 3 / 2);

    & .ce-inner ,
    & .ce-media {
      grid-column: 4 / -4;
      overflow: clip;
    }

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

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

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

      &.swiper {
        margin-inline: calc(var(--page-grid-gap) * -1 / 2);

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

        & .swiper-controls {
          position: static;
          display: flex;
          justify-content: end;
        }

        & .swiper-controls {
          display: flex;
          position: relative;
          bottom: 0;
          inset-inline: 0;
          gap: var(--controls-gap);
          z-index: 1;
          grid-column: 1 / -1;

          &.disabled {
            display: none;
          }

          & .swiper-pagination {
            position: relative;
            inset: unset;
            display: flex;
            justify-content: end;
            align-items: center;
            gap: var(--controls-gap);

            & .swiper-pagination-bullet {
              position: relative;
              line-height: unset;
              height: auto;
              width: var(--size-2);
              width: .75em;;
              aspect-ratio: 1;
              display: block;
              margin: 0;
              background-color: var(--color-gray);
              opacity: 1;

              &:hover {
                background-color: var(--color-gray);
                opacity: .5;
              }

              &::after {
                content: "";
                position: absolute;
                inset: calc((var(--size-2) + var(--border-width)) * -1) calc((var(--size-1) + var(--border-width)) * -1);
              }

              &:focus-visible {
                opacity: 1;
                outline: none;
                box-shadow: var(--shadow-focus-negative);
                box-shadow: 0 0 0 0.125em var(--color-darkblue), 0 0 0 .375em var(--color-gray);
              }

            }

            & .swiper-pagination-bullet-active {
              background-color: var(--color-gray);
              opacity: .5;
            }

          }

          & .swiper-playback {
            color: var(--color-gray);
            display: flex;
            align-items: center;
            cursor: pointer;

            &:hover i {
              opacity: .5;
            }

            &:focus-visible {
              opacity: 1;
              outline: none;

              i {
                opacity: 1;
              }

              & span {
                border-radius: 100vmax;
                box-shadow: 0 0 0 0.125em var(--color-darkblue), 0 0 0 .375em var(--color-gray);
              }

            }

            & i {
              font-size: .9375em;
              font-size: .85em;
            }

            & .swiper-play ,
            & .swiper-pause {
              width: 1em;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            & .swiper-pause i {
              transform: scale(1.2);
            }

            &[aria-pressed="false"] .swiper-pause ,
            &[aria-pressed="true"] .swiper-play {
              display: none;
            }

            &[aria-pressed="false"] .swiper-play ,
            &[aria-pressed="true"] .swiper-pause {
              display: flex;
            }

          }

        }

      }

    }

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

      & img {
        overflow: clip;        
      }
      
      & .ce-media-caption {
        padding-right: 1em;
      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_gallery {

    & .ce-gallery {
      --columns: 4;
    }

  }

}