[mb-section-container] {

  &[mb-variant="full"] {
    width: 100vw;
    margin-inline: 0;
  }

  &[mb-variant="contained"] {
    max-width: 120rem;
    margin-inline: auto;
  }

  &[mb-variant="spaced"] {
    width: calc(100vw - (var(--spacing-inline) * 2));
    margin-inline: auto;
  }

  &[mb-full-width-mobile="true"] {
    @media only screen and (max-width: 989px) {
      width: 100vw;
      margin-inline: 0;
    }
  }
}

[mb-variant="overlay"] {

  &::before {
    content: '';
    display: block;
    padding-bottom: var(--aspect-ratio-padding);
  }
}

[mb-media-wrapper] {

  &::before {
    content: '';
    display: block;
    padding-bottom: var(--aspect-ratio-padding);
  }
}

[mb-media-overlay] {
  backdrop-filter: blur(var(--overlay-blur)) grayscale(var(--overlay-grayscale));
}

.mb-element__background {
  scale: var(--background-scale);
  rotate: var(--background-rotate);
  translate: var(--background-translate-x) var(--background-translate-y);
}

[mb-overlay-context="desktop"] {
  @media only screen and (min-width: 990px) {
    &::before {
      content: '';
      display: block;
      padding-bottom: var(--aspect-ratio-padding);
    }
  }
}

[mb-overlay-context="all"] {
  &::before {
    content: '';
    display: block;
    padding-bottom: var(--aspect-ratio-padding);
  }
}

.mb-element__card {

  .mb-element__content {
    margin-top: 1.6rem;

    > * + * {
      margin-top: 1rem;
    }
  }

  .mb-element__vendor {
    opacity: 0.75;

    + .mb-element__title {
      margin-top: 0.4rem;
    }
  }
}

.mb-element__header {
  width: 100%;

  @media only screen and (min-width: 990px) {
    width: var(--header-width);
  }
}

.mb-element__content {
  width: 100%;
  
  p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
  }
}

.mb-element__description {

  p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
  }
}

.mb-element__overline,
.mb-element__block--overline,
.mb-element__title,
.mb-element__block--title,
.mb-element__subtitle,
.mb-element__block--subtitle,
.mb-element__description,
.mb-element__block--description,
.mb-element__buttons,
.mb-element__block--buttons {
  margin-bottom: 0;
}

[mb-block-type="header"] {
  
  .header-block-content {
    width: var(--header-width);
    min-width: var(--header-min-width);
  }
}

[mb-block-type="overline"] {
  
  &:not([mb-block-variant="label"]) {
    width: var(--overline-width);
    min-width: var(--overline-min-width);
  }

  &[mb-block-variant="label"] {
    padding-inline: 2.4rem;
    padding-block: 1.2rem;
    
    span {
      margin-bottom: -0.4rem;
    }
  }
}

[mb-block-type="description"] {
  width: var(--description-width);
  min-width: var(--description-min-width);

  * {
    margin-top: 0;
    margin-bottom: 0;
  }

  > span > * + *,
  .metafield-rich_text_field > * + * {
    margin-top: 3.2rem;
  }



  ul {
    * + * {
      margin-top: 1.6rem;
    }
  }
}

.mb-element__buttons {
  width: max-content;

  &.flex {
    gap: 1.6rem;
  }
}

.mb-element__divider {
  width: var(--divider-width);
  height: var(--divider-height);
}