@media all {

  .ce-container {
    --columns: 1;

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

      & > .column {
        display: flex;
        flex-direction: column;
        gap: var(--page-grid-gap);

        & > .swiper {
          max-width: 100%;

          & .ce-element {
            margin-top: 0;
          }

        }

      }

    }

    /* stretch images */

    &.ce-type-container-flex-fullwidth ,
    &.ce-type-container-50-25-25-fullwidth ,
    &.ce-type-container-25-25-25-25-fullwidth {
      --controls-gap: calc(var(--size-1) * 3 / 2);

      & .column {

        & .ce-element {
          height: 100%;

          & > .ce-media {
            display: grid;
            align-items: stretch;
            justify-content: stretch;

            & > .ce-gallery {
              display: grid;

              & > .ce-media-file {
                display: grid;
                align-items: stretch;

                & img {
                  object-fit: cover;
                }

              }

            }

          }

        }

        & > .swiper {
          height: 100%;
          width: 100%;
          position: relative;

          & .swiper-controls {
            display: flex;
            position: absolute;
            bottom: 0;
            inset-inline: 0;
            padding: var(--element-padding);
            background: linear-gradient(to top, var(--color-gray), rgba(var(--color-gray-rgb) ,0));
            gap: var(--controls-gap);
            z-index: 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-white);
                opacity: 1;

                &:hover {
                  background-color: var(--color-white);
                  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-white);
                }

              }

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

            }

            & .swiper-playback {
              color: var(--color-white);
              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-white);
                }

              }

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

            }

          }

        }

      }

    }

    /* special container rules */

    &.ce-type-container-50-25-25-fullwidth {
      --columns: 1;

      & > .ce-inner .column-1 {
        display: none;
      }

    }

  }

}

@media (min-width: 47.5rem) {

  .ce-container {

    &.ce-type-container-flex-fullwidth ,
    &.ce-type-container-50-25-25-fullwidth ,
    &.ce-type-container-25-25-25-25-fullwidth {
      --columns: 2;
    }

  }

}

@media (min-width: 62.5rem) {

  .ce-container {

    /* cards */

    &.ce-type-container-50-50 ,
    &.ce-type-container-33-33-33 {

      & > .ce-inner {
        grid-template-rows: repeat(2, auto);
        grid-gap: var(--page-grid-gap);
        grid-row-gap: 0;

        & > .column {
          display: grid;
          grid-row: 1 / -1;
          grid-template-rows: subgrid;
          gap: 0;

          & .ce-element.ce-type-dw_infocard {
            grid-row: 1 / -1;
            gap: 0;
            grid-template-rows: subgrid;

            & > .ce-media {
              grid-row: 1;
              display: grid;
              align-items: center;
            }

            & > .ce-inner {
              grid-row: 2;
              display: grid;

              & > .ce-text {
                display: grid;
                gap: var(--element-gap-text-text);

                & > .ce-bodytext {

                  & > p:has(a):last-child {
                    margin-top: auto;
                  }

                }

              }

            }

          }

        }

      }

    }

    &.ce-type-container-50-50 {
      --columns: 2;
    }

    &.ce-type-container-33-33-33 {
      --columns: 3;
    }

  }

}

@media (min-width: 90rem) {

  .ce-container {

    &.ce-type-container-flex-fullwidth ,
    &.ce-type-container-50-25-25-fullwidth ,
    &.ce-type-container-25-25-25-25-fullwidth {
      --columns: 4;
    }

    &.ce-type-container-50-25-25-fullwidth {

      & > .ce-inner .column-1 {
        display: grid;
        grid-column: span 2;
      }

    }

  }

}