@layer components {
  [data-coco][data-component="book-editable-slide"] {
    /* 
     * slide-padding-md at max (1480px): 240px (16.2%)
     * slide-padding-md at min (320px): 16.2% x 320px = 52px
     */
    --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));

    /* 
     * slide-padding-md at max (1480px): 120px (8.1%)
     * slide-padding-md at min (320px): 8.1% x 320px = 26px
     */
    --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));

    /* 
     * slide-padding-sm at max (1480px): 80px (5.4%)
     * slide-padding-sm at min (320px): 5.4% x 320px = 17px
     */
    --slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));

    /* 
     * Small title font size at max (1480px): 64px (4.3%)
     * Small title font size at min (320px): 4.3% x 320px = 13.8px
     */
    --title-font-size: max(
      32px,
      clamp(13.8px, 4.3cqw, theme(fontSize.display-3))
    );

    /* 
     * Text font size at max (1480px): 24px / 1.62%
     * Text font size at min (320px): 1.62% x 320px = 5.2px
     */
    --text-font-size: max(
      16px,
      clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
    );

    /* ------------- */

    @apply relative rounded-md @container;
    @apply bg-white bg-no-repeat bg-cover;

    min-width: 320px;

    .slide-aspect {
      @apply @slide-fluid:aspect-slide min-h-[62.5cqw] grid grid-cols-1 grid-rows-1;
    }

    .slide-container {
      @apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
      @apply px-6 py-10 @slide-fluid:p-[var(--slide-padding-md)];
    }

    [data-slide-region],
    .slide-header,
    .slide-text,
    .slide-media {
      @apply hidden;
    }

    .slide-group {
      @apply contents;
    }

    .slide-title {
      @apply font-bold text-current;
      overflow-wrap: anywhere;
      line-height: 1.1;
      font-size: var(--title-font-size);
    }

    .slide-text {
      @apply text-current;
      line-height: 1.5;
      font-size: var(--text-font-size);
    }

    .slide-media {
      @apply w-full text-current;
      font-size: var(--text-font-size);

      img {
        @apply w-full h-full object-contain;
      }
    }

    /* layouts */

    &[data-layout="one-col-title"] {
      /* 
       * Title font size at max (1480px): 80px (5.4%)
       * Title font size at min (320px): 5.4% x 320px = 17px
       */
      --title-font-size: max(
        35px,
        clamp(17px, 5.4cqw, theme(fontSize.display-2))
      );

      /* 
       * Text font size at max (1480px): 32px / 2.16%
       * Text font size at min (320px): 2.16% x 320px = 7px
       */
      --text-font-size: max(
        16px,
        clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
      );

      @apply text-center;

      .slide-container {
        @apply @slide-fluid:px-[var(--slide-padding-lg)];
      }

      [data-slide-region="content-1"] {
        @apply block;

        .slide-text {
          @apply block;
        }
      }

      &.with-title [data-slide-region="content-1"] .slide-text {
        margin-top: 0.875em;
      }

      .slide-layout {
        @apply flex flex-col items-center justify-center text-center w-full h-full;
      }

      .slide-header {
        @apply w-full block;
      }

      .slide-content {
        @apply flex-none w-full;
      }

      .slide-header,
      .slide-content {
        @apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
      }

      .slide-text {
        line-height: 1.4;
      }
    }

    &[data-layout="one-col-text"] {
      .slide-container {
        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
        @apply flex items-center;
      }

      .slide-layout {
        @apply @slide-fluid:grid w-full;
        height: min-content;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: var(--slide-padding-sm);
      }

      &.with-title {
        .slide-container {
          @apply block;
        }

        .slide-layout {
          @apply h-full;
          grid-template-rows: min-content auto;
        }
      }

      .slide-header {
        @apply w-full block;
        @apply mb-6 @slide-fluid:mb-0;
      }

      [data-slide-region="content-1"] {
        @apply block;

        .slide-text {
          @apply block;
        }
      }
    }

    &[data-layout="one-col-media"] {
      .slide-container {
        @apply p-6 @slide-fluid:p-[var(--slide-padding-sm)];
      }

      .slide-layout,
      .slide-content {
        @apply h-full;
      }

      [data-slide-region="content-1"] {
        @apply block;

        .slide-media {
          @apply block w-full h-full;

          img {
            @apply h-full w-full object-contain;
          }
        }
      }
    }

    &[data-layout="two-col-text"],
    &[data-layout="two-col-media"] {
      .slide-container {
        @apply flex items-center;
        @apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
      }

      .slide-layout {
        @apply @slide-fluid:grid w-full;
        height: min-content;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: var(--slide-padding-sm);
      }

      &.with-title {
        .slide-container {
          @apply block;
        }

        .slide-layout {
          @apply h-full;
          grid-template-rows: min-content auto;
        }
      }

      .slide-header {
        @apply w-full block;
        @apply mb-10 @slide-fluid:mb-0;
        grid-column-start: 1;
        grid-column-end: -1;
      }

      [data-slide-region="content-1"],
      [data-slide-region="content-2"] {
        @apply block;
      }

      [data-slide-region="content-1"] {
        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
      }
    }

    &[data-layout="two-col-text"] {
      .slide-text {
        @apply block;
      }
    }

    &[data-layout="two-col-media"] {
      .slide-layout {
        @apply @slide-fluid:h-full;
      }

      .slide-content {
        @apply relative @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
      }

      .slide-media {
        @apply block @slide-fluid:absolute @slide-fluid:inset-0;
      }
    }

    &[data-layout="two-col-mixed"] {
      .slide-layout {
        @apply @slide-fluid:grid w-full h-full;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: var(--slide-padding-sm);
      }

      .slide-group {
        @apply flex flex-col justify-center;
        @apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
      }

      .slide-header {
        @apply w-full block;
      }

      .slide-title {
        margin-bottom: 0.5em;
      }

      [data-slide-region="content-1"] {
        @apply block;

        .slide-text {
          @apply block;
        }
      }

      [data-slide-region="content-2"] {
        @apply relative block @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;

        .slide-media {
          @apply block @slide-fluid:absolute @slide-fluid:inset-0;

          img {
            @apply h-full w-full object-contain;
          }
        }
      }
    }
  }
}