.fs-block-section {
  --height: auto;
  --scroll-for-more-size: 42px;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--height);
  padding-block: var(--fs-blocks-spacing-xl);

  &.has-mask {
    overflow: clip;
  }

  &.is-sticky {
    position: sticky;
    top: 0;
    min-height: 100dvh;
    background: var(--fs-blocks-color-background);
  }

  >.fs-block-section__background {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    corner-shape: inherit;

    .fs-block-image__media,
    .fs-block-video,
    .fs-block-image__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      corner-shape: inherit;
    }
  }

  >.fs-block-section__scroll-for-more {
    --background-color: var(--fs-blocks-color-white);

    position: absolute;
    bottom: var(--wp--preset--spacing--xl);
    left: 50%;
    transform: translateX(-50%);
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    font-size: var(--scroll-for-more-size);

    &:not(:hover) {
      opacity: 0.7;
    }

    .fs-block-icon {
      --fs-size: var(--scroll-for-more-size);
    }
  }

  >.fs-shape-divider,
  >.fs-border-overlay {
    max-width: none;
    margin: 0;
  }

  >.fs-border-overlay {
    /* To override layout support styles */
    margin: var(--margin) !important;
  }
}

:where(.fs-block-section > *) {
  position: relative;
}

:where(.fs-block-section.is-layout-constrained)>.fs-block-section__background+* {
  margin-block-start: 0;
}

:where(.fs-block-section > *:not(.alignfull, .fs-border-overlay)) {
  width: 100%;
}

:where(.fs-block-section.has-mask) {
  --mask-size: 30px;
}

:root :where(.fs-block-section.is-layout-constrained) .fs-block-section__background+* {
  margin-block-start: 0;
}

/* Mask styles */

.is-mask-circle {
  clip-path: circle(50% at center);
}

.is-mask-angled {
  clip-path: polygon(0 calc(0% + var(--mask-size)), 100% 0, 100% 100%, 0 100%);
}

.is-mask-angled-right {
  clip-path: polygon(0 0, 100% calc(0% + var(--mask-size)), 100% 100%, 0 100%);
}

.is-mask-angled-large {
  clip-path: polygon(0 calc(0% + var(--mask-size)), 100% 0, 100% 100%, 0 100%);
}

.is-mask-angled-right-large {
  clip-path: polygon(0 0, 100% calc(0% + var(--mask-size)), 100% 100%, 0 100%);
}

.is-mask-arrow {
  clip-path: polygon(0 0,
      calc(50% - var(--mask-size)) 0,
      50% calc(0% + var(--mask-size)),
      calc(50% + var(--mask-size)) 0,
      100% 0,
      100% 100%,
      0 100%);
}

.is-mask-arrow-large {
  clip-path: polygon(0 0,
      calc(50% - var(--mask-size)) 0,
      50% calc(0% + var(--mask-size)),
      calc(50% + var(--mask-size)) 0,
      100% 0,
      100% 100%,
      0 100%);
}

.is-mask-angled-right,
.is-mask-arrow,
.is-mask-angled {
  margin-top: calc(-1 * var(--mask-size));
}

.is-mask-angled-right-large,
.is-mask-arrow-large,
.is-mask-angled-large {
  margin-top: calc(-1 * var(--mask-size) * 2);
}

:is(.fs-block-banner, .fs-block-section, .fs-block-slider:where(:not(.fs-block-repeater)))+.fs-block-section,
.fs-block-section+ :is(.fs-block-banner, .fs-block-section, .fs-block-slider:where(:not(.fs-block-repeater))) {
  margin-block-start: 0;
}