@media all {

  .ce-type-dw_benefit {

    & .ce-inner {
      order: 0;
      grid-column: 3 / -3;
    }

    & .ce-media {
      order: 1;
      grid-column: 3 / -3;

      & .ce-gallery {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;

        & > .ce-media-file ,
        & > .ce-gallery-overlay {
          grid-column: 1 / -1;
          grid-row: 1 / -1;          
        }

        & > .ce-gallery-overlay {
          justify-self: end;
          align-self: end;
          margin-bottom: var(--page-grid-gap);
          margin-right: var(--page-grid-gap);
          max-width: calc(var(--page-grid-col-max) * 2 + var(--page-grid-gap));

          &:has(.ce-media-file a) {
            transition: var(--transition-fast);
            transition-property: transform, box-shadow;

            &:hover ,
            &:focus-visible {
              transform: scale(1.025);
              box-shadow: var(--shadow-default-hover);
            }

          }

          & .ce-media-file {
            border-radius: unset;
          }

          & .ce-media-file:has(> a) a ,
          & .ce-media-file:not(:has(> a)) {
            padding: var(--page-grid-gap);
            border-radius: var(--radius-small);
            background-color: var(--current-card-background);
            display: grid;
            transition: var(--transition-fast);
            transition-property: transform box-shadow;
          }

        }

      }

      & .ce-media-file {
        border-radius: var(--radius-medium);
        overflow: clip;
      }

    }

    &:has(.ce-cta) .ce-header > * {
      color: var(--current-link-color);
    }

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

      & figure {
        filter: drop-shadow(0 0 16em rgba(255,255,255));
      }

    }

  }

}

@media (min-width: 62.5rem) {

  .ce-type-dw_benefit {

    & .ce-inner ,
    & .ce-media {
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    &:has(.ce-media-right) {

      & .ce-inner {
        padding-right: var(--element-padding);
        grid-column: 3 / -15;
      }

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

    }

    &:has(.ce-media-left) {

      & .ce-inner {
        padding-left: var(--element-padding);
        grid-column: 15 / -3;
      }

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

    }

  }

  .column-content .ce-type-dw_benefit {

    &:has(.ce-media-right) {

      & .ce-inner {
        grid-column: 1 / -9;
      }

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

    }

    &:has(.ce-media-left) {

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

      & .ce-media {
        grid-column: 1 / -15;
      }

    }


  }

}