@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://www.phocus-direct.de/hubfs/pdc-2025/fonts/roboto-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 400 is hosted here too, like the other weights; the theme's body font no longer loads HubSpot's own Roboto files */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://www.phocus-direct.de/hubfs/pdc-2025/fonts/roboto-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://www.phocus-direct.de/hubfs/pdc-2025/fonts/roboto-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://www.phocus-direct.de/hubfs/pdc-2025/fonts/roboto-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://www.phocus-direct.de/hubfs/pdc-2025/fonts/roboto-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Fallback until Roboto has loaded: Arial scaled to Roboto's widths per weight, with
   Roboto's ascent and descent, so a line breaks in the same place before and after the
   swap and nothing below moves. Widths measured on site headlines and body text,
   6 Oct 2026; Arial has no light or black cut, 300 uses Arial, 600 to 900 Arial Bold. */
@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 300;
  src: local('Arial'), local('ArialMT');
  size-adjust: 98.0%;
  ascent-override: 94.66%;
  descent-override: 24.91%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 99.6%;
  ascent-override: 93.14%;
  descent-override: 24.51%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 94.5%;
  ascent-override: 98.17%;
  descent-override: 25.83%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 95.0%;
  ascent-override: 97.65%;
  descent-override: 25.69%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 96.5%;
  ascent-override: 96.13%;
  descent-override: 25.30%;
  line-gap-override: 0%;
}

/* generics */
*, *:before, *:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

body {
  font-family: Roboto, 'Roboto Fallback', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #03045E;
  overflow-x: hidden;
  word-break: break-word;
}

/* Links without a module rule take the text colour of their surface instead of
   the browser blue. :where() keeps it at zero specificity, so every module rule wins. */
:where(a) {
  color: inherit;
}

img {
  vertical-align: middle;
}

/* Animated icon (js/pd-lottie-icons.js). The drawing leaves a margin of about 14% on
   every side of its 500x500 canvas; scale(1.3) makes it fill its box like the cropped
   PNG icons it replaces. The box size is set per module. */
pd-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
  width: 48px;
  height: 48px;
}

pd-icon .pd-icon__static,
pd-icon .pd-icon__anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.3);
}

pd-icon.is-ready .pd-icon__static {
  visibility: hidden;
}

iframe {
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.container {
  margin: 0 auto;
  width: var(--pd-container-width);
  max-width: var(--pd-container-max);
  position: relative;
}

.content {
  margin: 0 auto;
  width: var(--pd-content-width);
  max-width: var(--pd-content-max);
  position: relative;
}

.container .content {
  width: var(--pd-content-inner);
}

.grey-bckg {
  background-color: #F5F5F5;
}

.red {
  color: #F43A63;
  font-weight: 900;
}

.tagline {
  position: relative; 
  display: inline-block;
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 16px;
}

.tagline::after {
  content: '';
  position: absolute;
  top: -24px;
  right: -55px;
  background-image: url(https://www.phocus-direct.de/hubfs/pdc-2025/icons/red-arrow.svg);
  width: 13px;
  height: 71px;
  transform: rotate(-90deg);
}

.btn {
  color: var(--pd-white);
  background-color: var(--pd-berry);
  padding: 11px 19px;
  border-radius: var(--pd-radius-control);
  font-weight: 900;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 1px solid var(--pd-berry);
  transition: all 0.5s;
  height: 48px;
  display: inline-block;
}

.btn:hover {
  background-color: #00B4D8;
  border-color: #00B4D8;
}

.btn--inv {
  background-color: transparent;
  color: #F43A63;
}

.btn--inv:hover {
  color: #00B4D8;;
  background-color: transparent;
  border-color: #00B4D8;
}

.hero .btn--inv {
  background-color: var(--pd-white);
  color: var(--pd-navy);
  border-color: var(--pd-navy);
}

.hero .btn--inv:hover {
  background-color: var(--pd-cyan);
  color: var(--pd-navy);
  border-color: var(--pd-cyan);
}

.btn--white {
  background-color: transparent;
  color: var(--pd-white);
  border-color: var(--pd-white);
}

.gradientTitle {
  margin-bottom: 20px;
  font-weight: 300;
  font-size: 32px;
  line-height: 38px;
  background: -webkit-linear-gradient(135deg, #00B4D8, #03045E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradientTitle strong {
  font-weight: 900;
}

/*search results*/
.searchRes__preheader {
  padding: 92px 0 48px 0;
}

.searchRes__preheader h2 span {
  display: block;
  font-weight: 900;
}

.hs-search-results {
  padding-bottom: 60px;
}

.hs-search-results .hs-search-results__listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 46px;
}

.hs-search-results .hs-search-results__listing li {
  background-color: var(--pd-surface);
  border-radius: var(--pd-radius-box);
  padding: 24px;
  box-shadow: var(--pd-shadow);
}

.hs-search-results .hs-search-results__title {
  display: block;
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
  color: #03045E;
  margin-bottom: 8px;
  text-decoration: none;
}

.hs-search-results .hs-search-results__title .hs-search-highlight,
.hs-search-results .hs-search-highlight {
  font-weight: 900;
  color: #F43A63;
}

.hs-search-results__pagination {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  font-size: 0;
}

.hs-search-results__pagination .hs-search-results__prev-page,
.hs-search-results__pagination .hs-search-results__next-page {
  float: none;
  width: 48px;
  height: 48px;
  background-image: url(https://www.phocus-direct.de/hubfs/pdc-2025/testimonials-img.svg);
}

.hs-search-results__pagination .hs-search-results__prev-page {
  transform: rotate(180deg);
}

.hs-search__no-results p:first-child {
  font-weight: 900;
  font-size: 20px;
  line-height: 28px;
}

/* blog styles */

/* The graphic sits on the whole page container, head plus card list. Its
   vertical offset is in pixels, not per cent: a percentage is measured
   against the container height, so the graphic would move as soon as the
   number of cards changes and sit differently on /blog and /presse. */
/* The listing templates hold no spacer modules: the edge gaps below carry the
   spacer steps. Both boxes keep the margins inside, so the page top stays at
   the window edge (the graphic is placed from there) and the gaps of the card
   grid and the pagination add up instead of collapsing. */
.blog,
.blog > .content {
  display: flow-root;
}

.blog {
  background-image: url(https://www.phocus-direct.de/hubfs/pdc-2025/blog-blur.svg);
  background-position: 30% 400px;
  background-repeat: no-repeat;
  background-size: 1000px;
}

/* Page start without hero (spacer step 100), text to card grid 90px */
.blog__top {
  margin: calc(var(--pd-space-module) + var(--pd-space-xl)) 0 calc(2 * var(--pd-space-module) + var(--pd-space-sm));
}

.blog__top p {
  color: var(--pd-navy);
}

.blog__listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: var(--pd-space-module) 0;
}

.blog__listing .item {
  background-color: var(--pd-surface);
  border-radius: var(--pd-radius-box);
  box-shadow: var(--pd-shadow);
  display: flex;
  flex-direction: column;
}

/* Focus sits above the centre: the subjects of the source images are in
   their upper half. */
.blog__listing .item__imgBox {
  display: block;
}

.blog__listing .item__img {
  aspect-ratio: 16 / 9;
  border-radius: var(--pd-radius-box) var(--pd-radius-box) 0 0;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 22%;
}

/* Same card as the blog cards (.rp__post in module_recent-posts-hubdb): the
   link sits at the bottom edge, 32px below the text at the least */
.blog__listing .item__txt {
  border-radius: 0 0 var(--pd-radius-box) var(--pd-radius-box);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
}

.blog__listing .item__descr {
  margin-bottom: 32px;
}

/* Whatever ends the text, summary or title alone, adds nothing to the 32px */
.blog__listing .item h2.item__title:last-child,
.blog__listing .item__text > :last-child {
  margin-bottom: 0;
}

.item__tag {
  color: var(--pd-cyan);
  font-weight: var(--pd-fw-black);
  margin-bottom: 8px;
}

.topic:last-child span {
  display: none;
}

.blog__listing .item h2.item__title,
.blog__listing .item h2.item__title a {
  font-weight: var(--pd-fw-black);
  font-size: var(--pd-fs-article-h3);
  line-height: var(--pd-lh-article-h3);
  margin-bottom: 8px;
  text-decoration: none;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}

.item__link {
  color: var(--pd-berry);
  font-weight: 700;
  text-decoration: none;
  position: relative;
  margin-top: auto;
  display: inline-block;
}

.item__link::after {
  background-image: url(https://www.phocus-direct.de/hubfs/pdc-2025/right-arrow-alt.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 24px;
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  transition: all .5s;
  width: 24px;
}

.item__link:hover::after {
  right: -36px;
}

.item__txt .item__text {
  color: var(--pd-navy);
}

.item__txt .item__text a {
  text-decoration: none;
  font-weight: 700;
  color: var(--pd-navy);
}

.item__txt .item__text h2,
.item__txt .item__text h3,
.item__txt .item__text .tagline,
.item__txt .item__text p,
.item__txt .item__text li {
  margin-bottom: 12px;
}

.item__txt .item__text ul li {
  list-style: none;
}

.blog__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  /* Card grid to pagination 90px, pagination to footer 85px (text / footer) */
  margin: calc(var(--pd-space-module) + var(--pd-space-sm)) auto calc(var(--pd-space-module) + var(--pd-space-md));
}

.blog__arrows img.blog__arrow--left {
  transform: rotate(180deg);
}

.blog__arrows a {
  text-decoration: none;
}

.blog__dots {
  display: flex;
  margin-left: -20px;
}

.pagination__dot {
  color: transparent;
  width: 48px;
  height: 48px;
  background-color: transparent;
  display: block;
  position: relative;
}

.pagination__dot::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 8px;
  height: 8px;
  background-color: var(--pd-disabled);
  border-radius: var(--pd-radius-round);
}

.pagination__dot--active::before {
  background-color: var(--pd-cyan);
}

.blog__cat {
  display: none;
  width: 100%;
}

.blog__cat ul {
  display: flex;
  border-bottom: 1px solid var(--pd-cyan);
  padding-bottom: 12px;
  width: 100%;
}

.blog__cat ul li {
  list-style: none;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--pd-radius-control);
  transition: all 0.5s;
}

.blog__cat ul li:hover {
  border-color: var(--pd-berry);
}

.blog__cat ul li:hover a {
  color: var(--pd-berry);
}

.blog__cat ul li a {
  color: var(--pd-cyan);
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
}

.blog__cat ul li .filter-link-count {
  display: none;
}

@media (min-width: 480px) {
  .gradientTitle {
    font-size: 36px;
    line-height: 43px;
  }
}

@media (min-width: 768px) {
  .blog__listing {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .blog__dots {
    gap: 8px;
    margin-left: 0;
  }

  .pagination__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--pd-radius-round);
    background-color: var(--pd-disabled);
    position: initial;
  }

  .pagination__dot::before {
    display: none;
  }

  .pagination__dot--active {
    background-color: var(--pd-cyan);
  }
}

@media (min-width: 1024px) {
  .content__headerbox {
    position: relative;
  }

  .tagline {
    position: absolute;
    margin: 0;
    left: 0;
    top: 10px;
    min-width: fit-content;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    margin-bottom: 0;
    margin-top: auto;
  }

  .tagline::after {
    transform: rotate(180deg);
    left: 7px;
    right: auto;
    top: auto;
    bottom: calc(100% + 20px);
  }

  h2.gradientTitle {
    font-size: 48px;
    line-height: 58px;
  }

  .blog {
    background-position: calc(50% + 300px) -118px;
    background-size: auto;
  }

  .blog__top {
    display: flex;
    align-items: flex-end;
    position: relative;
    gap: 40px;
  }

  .blog__top h1 {
    padding-left: 48px;
    min-width: 632px;
    max-width: 632px;
  }

  .blog__top h1 strong {
    font-weight: 900;
  }
  
  .blog__top .tagline {
    top: 20px;
  }

  .blog__top p {
    max-width: 640px;
    color: var(--pd-white);
  }

  .blog__listing {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .hs-search-results .hs-search-results__listing {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1440px) {
  .blog {
    background-position: calc(50% + 320px) -195px;
  }
}

@media (min-width: 1920px) {
  .blog {
    background-size: 1150px;
    background-position: calc(50% + 350px) -224px;
  }
}

/* end blog styles */

@media (min-width: 768px) {
  .searchRes__preheader {
    padding: 166px 0 90px 0;
  }

  .searchRes__preheader h2 {
    padding-left: 48px;
  }

  .hs-search-results {
    padding-bottom: 90px;
  }

  .hs-search-results .hs-search-results__listing {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 60px;
  }

  .hs-search-results .hs-search-results__title {
    font-size: 24px;
    line-height: 34px;
  }

  .hs-search__no-results p:first-child {
    font-size: 24px;
    line-height: 34px;
  }

  .searchRes__preheader .tagline {
    top: 15px;
    left: -15px;
  }

}

/*HubSpot layout fix*/

.span12 {
  width: 100%;
}

/*subs center*/

.subscenter .content {
  padding: 64px 0;
}

.subscenter .content p.header {
  margin: 24px 0 ;
  box-shadow: none;
  position: initial;
  transform: none;
}

.subscenter .content .item {
  margin-bottom: 24px;
  padding: 24px;
  background-color: var(--pd-grey);
  border-radius: var(--pd-radius-box);
}

.subscenter .content .checkbox-row {
  margin-bottom: 6px;
  font-weight: 900;
}

.subscenter .content input[type="submit"] {
  color: var(--pd-white);
  background-color: var(--pd-berry);
  padding: 11px 19px;
  border-radius: var(--pd-radius-control);
  font-weight: 900;
  text-decoration: none;
  border: 1px solid var(--pd-berry);
  transition: all 0.5s;
  height: 48px;
  display: inline-block;
  margin-top: 24px;
}

.subscenter .content input[type="submit"]:hover {
  background-color: var(--pd-cyan);
  border-color: var(--pd-cyan);
}

@media (min-width: 1024px) {
  .subscenter .content {
    padding: 80px 0;
    max-width: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}