@media all {

  .ce-container {
    --columns: 1;

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

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

    }

    & .ce-container-50-50 {

      & .column-1 {

        & .ce-text {
          padding-right: var(--element-padding);
        }

      }

      & .column-2 {

        & .ce-text {
          padding-left: var(--element-padding);
        }

      }

    }

  }

  .ce-type-container-accordion {
    grid-row-gap: 0 !important;

    & .ce-header {
      position: relative;
      display: flex;
      align-items: center;

      & .ce-accordion-button {
        position: static;
        width: auto;
        display: inline-grid;
        place-items: center;
        margin-right: var(--element-gap-small);
        color: var(--current-button-color);
        background-color: var(--current-button-background);
        box-shadow: var(--shadow-default);
        width: var(--size-7);
        height: var(--size-7);
        border-radius: 100vmax;

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

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

        &::after {
          content: "";
          position: absolute;
          inset: 0;
        }

        &[aria-expanded="false"] .state-open ,
        &[aria-expanded="true"] .state-closed {
          display: none;
        }

      }

    }

    & .ce-accordion-content > .column {
      padding-top: var(--page-gap);
    }

  }

}

@media (min-width: 62.5rem) {

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

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

}