/* DEFINE SPACING FRAMEWORK VARIABLES */
:root {
  /* GAP SCALE */
  /* https://utopia.fyi/space/calculator?c=320,16,1.2,1280,18,1.25,5,2,&s= */
  --gap-xxxs: clamp(0.25rem, 0.15rem + 0.52vw, 0.56rem);
  --gap-xxs: clamp(0.5rem, 0.38rem + 0.63vw, 0.88rem);
  --gap-xs: clamp(0.75rem, 0.63rem + 0.63vw, 1.13rem);
  --gap-s: clamp(1rem, 0.77rem + 1.15vw, 1.69rem);
  --gap-m: clamp(1.5rem, 1.25rem + 2.25vw, 3rem);
  --gap-l: clamp(2rem, 1.54rem + 2.29vw, 3.38rem);
  --gap-xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
  --gap-xxl: clamp(4rem, 3.08rem + 4.58vw, 6.75rem);

  /* SECTION PADDING SCALE */
  /* https://utopia.fyi/space/calculator?c=320,16,1.2,1280,40,1.25,5,2,&s= */
  --section-xxxs: clamp(0.38rem, 0.08rem + 1.46vw, 1.25rem);
  --section-xxs: clamp(0.75rem, 0.38rem + 1.88vw, 1.88rem);
  --section-xs: clamp(1.13rem, 0.67rem + 2.29vw, 2.5rem);
  --section-s: clamp(1.5rem, 0.75rem + 3.75vw, 3.75rem);
  --section-m: clamp(2.25rem, 1.33rem + 4.58vw, 5rem);
  --section-l: clamp(3rem, 1.5rem + 7.5vw, 7.5rem);
  --section-xl: clamp(4.5rem, 2.67rem + 9.17vw, 10rem);

  /* CONTEXTUAL GAP VARIABLES */
  --grid-gap: var(--gap-m);        /* Gap between columns */
  --content-gap: var(--gap-s);     /* Gap between content elements */
  --container-gap: var(--gap-m);   /* Gap between multiple containers in a section */
}

/* SECTION HEIGHT / UTILITY CLASSES */
/* Do not set any section styles in Theme Styles. */
/* 'padding-block' is top and bottom. 'padding-inline' is left and right */

.grid-gap {
  gap: var(--grid-gap);
}

/* Vertical spacing between content elements. Set on parent of the elements. */
.content-gap {
  gap: var(--content-gap);
}

/* If you want smaller vertical spacing between content elements. As above */
.content-gap-s {
  gap: calc(var(--content-gap) / 1.5);
}

/* Vertical gap between containers inside a section.
   You don't usually have to set this, because we already have a default row gap */
.container-gap {
  gap: var(--container-gap);
}

/* "Imperfect" solution to create more even spacing between 'content-gap' elements */
.content-gap :is(p, h1, h2, h3, h4, h5, h6),
.content-gap-s :is(p, h1, h2, h3, h4, h5, h6) {
  margin-block-end: -0.2em;
}