:root {
  /* Block spacing variables */
  --block-spacing-top-sm: 1.5rem;
  --block-spacing-top-md: 2rem;
  --block-spacing-top-lg: 2.5rem;
  
  --block-heading-bottom-sm: 1.25rem;  /* 5 in Tailwind units */
  --block-heading-bottom-md: 1.75rem;  /* 7 in Tailwind units */
  --block-heading-bottom-lg: 2.25rem;  /* 9 in Tailwind units */
}

/* Apply these variables to a reusable class */
.block-spacing {
  margin-top: var(--block-spacing-top-sm);
}

/* Target blocks inside sections, but not nested blocks */
.custom-scroll-margin > div > div > .block-spacing {
  margin-top: calc(var(--block-spacing-top-sm) * 2); /* Double spacing for blocks inside sections */
}

/* First block inside a section should have normal spacing */
.custom-scroll-margin > div > div > .block-spacing:first-child {
  margin-top: var(--block-spacing-top-sm);
}

/* Blocks nested inside other blocks should have no additional margin */
.block-spacing .block-spacing .block-spacing {
  margin-top: 0 !important;
}

.block-heading-spacing {
  margin-bottom: var(--block-heading-bottom-sm);
}

@media (min-width: 768px) {
  .block-spacing {
    margin-top: var(--block-spacing-top-md);
  }
  
  /* Target blocks inside sections, but not nested blocks */
  .custom-scroll-margin > div > div > .block-spacing {
    margin-top: calc(var(--block-spacing-top-md) * 2); /* Double spacing for blocks inside sections */
  }

  /* First block inside a section should have normal spacing */
  .custom-scroll-margin > div > div > .block-spacing:first-child {
    margin-top: var(--block-spacing-top-md);
  }
  
  .block-heading-spacing {
    margin-bottom: var(--block-heading-bottom-md);
  }
}

@media (min-width: 1024px) {
  .block-spacing {
    margin-top: var(--block-spacing-top-lg);
  }
  
  /* Target blocks inside sections, but not nested blocks */
  .custom-scroll-margin > div > div > .block-spacing {
    margin-top: calc(var(--block-spacing-top-lg) * 2); /* Double spacing for blocks inside sections */
  }

  /* First block inside a section should have normal spacing */
  .custom-scroll-margin > div > div > .block-spacing:first-child {
    margin-top: var(--block-spacing-top-lg);
  }
  
  .block-heading-spacing {
    margin-bottom: var(--block-heading-bottom-lg);
  }
}