/* Converts XD font-spacing to browser */
:root {
  --mobile-small: 480px;
}
:root {
  --mobile: 768px;
}
:root {
  --tablet: 998px;
}
:root {
  --laptop: 1200px;
}
:root {
  --desktop: 1920px;
}
:root {
  --uhd: 3840px;
}
:root {
  --triangle-width: 30px;
  --triangle-height: 30px;
  --triangle-color: black;
}
.arrow-up {
  width: var(--triangle-width);
  height: var(--triangle-height);
  border-left: calc(var(--triangle-width)/2) solid transparent;
  border-right: calc(var(--triangle-width)/2) solid transparent;
  border-bottom: calc(var(--triangle-height)/2) solid var(--triangle-color);
}
.arrow-down {
  width: var(--triangle-width);
  height: var(--triangle-height);
  border-left: calc(var(--triangle-width)/2) solid transparent;
  border-right: calc(var(--triangle-width)/2) solid transparent;
  border-top: calc(var(--triangle-height)/2) solid var(--triangle-color);
}
.arrow-right {
  width: var(--triangle-width);
  height: var(--triangle-height);
  border-top: calc(var(--triangle-height)/2) solid transparent;
  border-bottom: calc(var(--triangle-height)/2) solid transparent;
  border-left: calc(var(--triangle-width)/2) solid var(--triangle-color);
}
.arrow-left {
  width: var(--triangle-width);
  height: var(--triangle-height);
  border-top: calc(var(--triangle-height)/2) solid transparent;
  border-bottom: calc(var(--triangle-height)/2) solid transparent;
  border-right: calc(var(--triangle-width)/2) solid var(--triangle-color);
}
:root {
  --color-white: #ffffff;
}
:root {
  --color-black: #000000;
}
:root {
  --color-brand-red: #872817;
}
:root {
  --color-brand-light-grey: #707070;
}
:root {
  --color-brand-dark-grey: #3b3b3b;
}