.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));
  }
}