@layer components {
  

  
  .fold {
    display: grid;
    grid-template-rows: 1fr;
    padding-top: var(--fold-lead, 0);
    transition: grid-template-rows var(--transition-enter),
                opacity var(--transition-enter),
                visibility var(--transition-enter),
                padding-top var(--transition-enter);
  }

  .fold > * {
    min-height: 0;
    
    overflow: clip;
    overflow-clip-margin: var(--space-2);
    transition: padding-block var(--transition-enter),
                border-color var(--transition-enter);
  }

  .fold--closed {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;
    transition: grid-template-rows var(--transition-exit),
                opacity var(--transition-exit),
                visibility var(--transition-exit),
                padding-top var(--transition-exit);
  }

  
  .fold.fold--closed > * {
    padding-block: 0;
    border-color: transparent;
    transition: padding-block var(--transition-exit),
                border-color var(--transition-exit);
  }
}