.customizableContent {
  position: relative;
  display: flex;
  flex-direction: column;

  .moduleBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--arrangeBack);

    &.solidColorWhite { background-color: var(--white); }
    &.solidColorBlack { background-color: var(--black); }
    &.solidColorGrey { background-color: var(--grey); }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .innerWrapper {
    position: relative;
    display: block;

    &.fullWidth {
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    .contentBlocks {
      --blockGap: min(10vw, 100px);
      display: flex;
      flex-wrap: wrap;
      gap: var(--blockGap);
      position: relative;
      width: 100%;
      z-index: var(--arrangeFront);

      .contentBlock {
        display: flex;
        flex-direction: column;
        gap: 15px;

        &.advanced {
          .blockTypeContent,
          .blockTypeButtons {
            position: relative;
          }

          .blockTypeContent {
            margin-top: clamp(24px, 4vw, 50px);

            @media (min-width: 1024px) {
              margin-top: clamp(24px, 4vw, 100px);
            }
          }
        }

        /* Mobile | Every block stacks full width */
        &.width-1-4,
        &.width-1-3,
        &.width-1-2,
        &.width-full { width: 100%; }

        /* Tablet | Fractional blocks go 2-up, full stays full */
        @media (min-width: 768px) {
          &.width-1-4,
          &.width-1-3,
          &.width-1-2 { width: calc(50% - var(--blockGap) / 2); }
        }

        /* Desktop | True fractional widths (fraction × 100% − (1 − fraction) × gap) */
        @media (min-width: 1024px) {
          &.width-1-4 { width: calc(25% - var(--blockGap) * 3 / 4); }
          &.width-1-3 { width: calc(100% / 3 - var(--blockGap) * 2 / 3); }
          &.width-1-2 { width: calc(50% - var(--blockGap) / 2); }
        }

        &.blockPaddingNone {
          padding: 0;

          @media (min-width: 1024px) {
            padding: 0
          }
        }

        &.blockPaddingAll {
          padding: clamp(24px, 4vw, 50px);

          @media (min-width: 1024px) {
            padding: clamp(24px, 4vw, 100px);
          }
        }

        &.blockPaddingTopOnly {
          padding-top: clamp(24px, 4vw, 50px);

          @media (min-width: 1024px) {
            padding-top: clamp(24px, 4vw, 100px);
          }
        }

        &.blockPaddingBottomOnly {
          padding-bottom: clamp(24px, 4vw, 50px);

          @media (min-width: 1024px) {
            padding-bottom: clamp(24px, 4vw, 100px);
          }
        }

        &.blockBackgroundTransparent { background-color: transparent; }
        &.blockBackgroundWhite { background-color: var(--white); }
        &.blockBackgroundBlack { background-color: var(--black); }
        &.blockBackgroundGrey { background-color: var(--grey); }

        &.contentAlignLeft {
          align-items: flex-start;
        }
        
        &.contentAlignCenter {
          align-items: center;

          img {
            display: inline-block;
          }
        }
        
        &.contentAlignRight {
          align-items: flex-end;
        }

        &.contentAlignUnset {
          align-items: normal;
        }

        &.contentAlignVerticalTop { justify-content: flex-start; }
        &.contentAlignVerticalCenter { justify-content: center; }
        &.contentAlignVerticalBottom { justify-content: flex-end; }

        &.textColorWhite { h1, h2, h3, h4, h5, h6, p, ol, ul { color: var(--white) }}
        &.textColorBlack { h1, h2, h3, h4, h5, h6, p, ol, ul { color: var(--black) }}

        h1, h2, h3, h4, h5, h6, p, ul, ol {
          width: 100%;
          max-width: 800px;
        }

        em {
          font-style: normal;
          color: var(--green);
        }

        p {
          margin: 0px;
        }

        img {
          width: 100%;
          max-height: 500px;
          object-fit: cover;
          border-radius: var(--roundedCorners);

          @media (min-width: 768px) {
            max-height: 700px;
          }
        }
      }
    }
  }
}