@layer base-styles {
  .divider-v3 {
    display: grid;
    display: var(--display-mobile, grid);
  }
  @media screen and (min-width: 768px) {
    .divider-v3 {
      display: grid;
      display: var(--display-portrait, grid);
    }
  }
  @media screen and (min-width: 1024px) {
    .divider-v3 {
      display: grid;
      display: var(--display-desktop, grid);
    }
  }
  .divider-v3.vertical {
    height: 100%;
  }
  .divider-v3.vertical .divider-v3__line {
    height: 100%;
  }
  @media screen and (min-width: 768px) {
    .divider-v3.vertical .divider-v3__line {
      height: 100%;
    }
  }
  @media screen and (min-width: 1024px) {
    .divider-v3.vertical .divider-v3__line {
      height: 100%;
    }
  }
  .divider-v3.horizontal .divider-v3__line {
    width: 100%;
  }
  @media screen and (min-width: 768px) {
    .divider-v3.horizontal .divider-v3__line {
      width: 100%;
    }
  }
  @media screen and (min-width: 1024px) {
    .divider-v3.horizontal .divider-v3__line {
      width: 100%;
    }
  }
  .divider-v3__line {
    background-color: var(--divider-v3-background-colour);
    background-image: var(--divider-v3-background-image);
    background-repeat: var(--divider-v3-background-repeat);
    background-position: var(--divider-v3-background-position-x) var(--divider-v3-background-position-y);
    width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
    height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
    place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
    max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
    max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));
  }
  @media screen and (min-width: 768px) {
    .divider-v3__line {
      height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
      width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
      max-width: calc(var(--divider-v3-max-width-portrait) / var(--design-reference) * var(--screen-width));
      max-height: calc(var(--divider-v3-max-height-portrait) / var(--design-reference) * var(--screen-width));
    }
  }
  @media screen and (min-width: 1024px) {
    .divider-v3__line {
      height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
      width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
      max-width: calc(var(--divider-v3-max-width-desktop) / var(--design-reference) * var(--screen-width));
      max-height: calc(var(--divider-v3-max-height-desktop) / var(--design-reference) * var(--screen-width));
    }
  }
}