:root {
  --clr-fill-primary-default: #141414;
  --clr-fill-primary-interaction: #2e2e2e;

  --clr-fill-secondary-default: #b380d4;
  --clr-fill-secondary-interaction: #975fbd;

  /* // BORDER */

  --clr-border-primary-default: #141414;
  --clr-border-primary-interaction: #898989;

  --clr-border-secondary-default: #b380d4;
  --clr-border-secondary-interaction: #dfbef4;

  /* // TEXT */

  --clr-text-default: #141414;
  --clr-text-inverse: #ffffff;
  --clr-text-light: #969696;

  /* // BACKGROUND */

  --clr-background-default: #ffffff;
  --clr-background-inverse: #141414;

  --clr-background-accent-peach: #fcf5ed;
  --clr-background-accent-velvety: #f6f0f9;
  --clr-background-accent-grey: #f4f4f4;

  /* // GRADIENT */

  --clr-gradient-peach-100: rgba(253, 206, 190, 1);
  --clr-gradient-peach-50: rgba(253, 206, 190, 0.5);
  --clr-gradient-peach-0: rgba(253, 206, 190, 0);

  --clr-gradient-velvet-100: rgba(196, 199, 242, 1);
  --clr-gradient-velvet-50: rgba(196, 199, 242, 0.5);
  --clr-gradient-velvet-0: rgba(196, 199, 242, 0);

  --clr-gradient-ice-100: rgba(164, 240, 244, 1);
  --clr-gradient-ice-50: rgba(164, 240, 244, 0.5);
  --clr-gradient-ice-0: rgba(164, 240, 244, 0);

  --clr-gradient-pink-100: rgba(255, 194, 255, 1);
  --clr-gradient-pink-50: rgba(255, 194, 255, 0.5);
  --clr-gradient-pink-0: rgba(255, 194, 255, 0);

  --clr-gradient-banana-100: rgba(253, 228, 190, 1);
  --clr-gradient-banana-50: rgba(253, 228, 190, 0.5);
  --clr-gradient-banana-0: rgba(253, 228, 190, 0);

  /* // SERVICE */

  --clr-service-error-dark: #a8333b;
  --clr-service-error-default: #f54e5d;
  --clr-service-error-light: #ffebef;

  --clr-service-warning-dark: #de7d0c;
  --clr-service-warning-default: #ffca64;
  --clr-service-warning-light: #ffeece;

  --clr-service-success-dark: #09896a;
  --clr-service-success-default: #2feea9;
  --clr-service-success-light: #e3fbeb;

  --clr-service-selection: rgb(190, 116, 236, 0.2);
  --clr-search-selection: rgb(255 230 146);

  --side-paddings-l: 50px;
  --side-paddings-m: 32px;
  --side-paddings-s: 24px;

  --radius-l: 16px;
  --radius-m: 8px;
  --radius-s: 6px;

  --section-max-width: 1200px;
}

/* ////////////////////////// */
/* ///////// GLOBAL ///////// */
/* ////////////////////////// */

::selection {
  background: var(--clr-service-selection);
}

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

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "ABCMarfa", sans-serif;
  font-weight: 200;
  color: var(--clr-text-default);
  font-size: 17px;
  overflow-x: hidden;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--clr-text-default);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: none;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
}

li {
  margin-bottom: 16px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--clr-border-primary-default);
  min-width: 500px;
}

th {
  text-align: left;
}

th,
td {
  vertical-align: top;
  padding: 16px 20px;
  border: 1px solid var(--clr-border-primary-default);
}

h2 {
  font-family: "Gza", serif;
  font-size: 40px;
  margin-bottom: 24px;
  line-height: 120%;
}

h3 {
  font-family: "ABCMarfa", sans-serif;
  font-size: 30px;
  margin-bottom: 16px;
  line-height: 130%;
  font-weight: 200;
}

h4,
h5,
h6 {
  line-height: 130%;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-size: inherit !important;
}

.article__table-wrap {
  max-width: var(--section-max-width);
  overflow-x: auto;
}

.article__table-wrap::-webkit-scrollbar {
  display: none;
}

/* /////////////////////////// */
/* ///////// DIVIDER ///////// */
/* /////////////////////////// */

.divider {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--clr-fill-primary-default);
  opacity: 0.2;
}

/* ////////////////////////// */
/* /////// TYPOGRAPHY /////// */
/* ////////////////////////// */

/* TITLES */

.xl-title {
  font-family: "Gza", serif;
  font-size: 66px;
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 115%;
}

.l-title {
  font-family: "Gza", serif;
  font-size: 46px;
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 120%;
}

.s-title,
.recent-articles-title {
  font-family: "ABCMarfa", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  margin-top: 0;
  margin-bottom: 16px;
}

.l-text {
  max-width: 900px;
  font-family: "ABCMarfa", sans-serif;
  font-weight: 200;
  font-size: 24px;
  line-height: 160%;
  margin-top: 0;
}

.m-text,
p {
  max-width: 740px;
  font-family: "ABCMarfa", sans-serif;
  font-weight: 200;
  font-size: 17px;
  line-height: 160%;
}

/* ///////////////////////// */
/* //////// INPUTS ///////// */
/* ///////////////////////// */

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.form-field .optional {
  opacity: 0.5;
  margin-left: 6px;
}

.form-field label {
  font-size: 14px;
  margin-bottom: 12px;
}

.form-field input,
.form-field textarea {
  -webkit-appearance: none;
  font-size: 24px;
  font-weight: 200;
  min-height: 40px;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 1px 0 0 var(--clr-border-primary-default);

  transition: box-shadow 0.15s ease;
  max-width: 100%;
}

.form-field input:hover,
.form-field input:focus,
.form-field textarea:hover,
.form-field textarea:focus {
  outline: none;
  box-shadow: 0 2px 0 0 var(--clr-border-primary-default);
}

.notification,
#request_description_hint {
  font-size: 14px;
  margin-top: 12px;
  color: var(--clr-text-light);
}

.notification-error {
  color: var(--clr-service-error-default);
}

/* ///////////////////////// */
/* /////// DROPDAWN //////// */
/* ///////////////////////// */

zd-autocomplete {
  border: none;
  overflow: hidden;
  border-radius: var(--radius-l);
  box-shadow: 0px 24px 74px #f1e7ed;
}

zd-autocomplete-title-multibrand {
  font-size: 18px !important;
  color: var(--clr-text-default) !important;
}

zd-autocomplete > zd-autocomplete-multibrand:last-child {
  border: none;
  box-shadow: none;
}

zd-autocomplete-breadcrumbs-multibrand {
  opacity: 0.6;
  margin-top: 8px;
}

/* ///////////////////////// */
/* ////// DROP ZONE //////// */
/* ///////////////////////// */

.upload-dropzone {
  border: 1px dotted rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-m);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
}

.upload-dropzone:hover {
  border: 1px dotted rgba(0, 0, 0, 0.8);
}

.upload-item {
  width: 100%;
}

/* ///////////////////////// */
/* //////// BUTTONS //////// */
/* ///////////////////////// */

.button,
input[type="submit"] {
  cursor: pointer;
  display: flex;
  min-height: 60px;
  min-width: 180px;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border-radius: 100px;
  min-width: 272px;
  text-decoration: none;

  font-size: 16px;
  line-height: 130%;
  font-weight: 500;

  transition: all 0.1s ease;
}

.button span {
  font-size: 16px;
  line-height: 130%;
  font-weight: 500;
}

.button_small {
  min-height: 50px;
}

/* PRIMARY */

.button_primary,
input[type="submit"] {
  background: var(--clr-fill-primary-default);
  color: var(--clr-text-inverse);
  outline: none;
  border: none;
}

.button_primary:hover,
.button_primary:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  text-decoration: none;
  background: var(--clr-fill-primary-interaction);
}

/* /////////////////////////////// */
/* //////// BREADCRIMBS ////////// */
/* /////////////////////////////// */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-top: 24px;
  margin-bottom: 16px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  margin-right: 12px;
  margin-bottom: 8px;
}

.breadcrumbs li a {
  text-decoration: none;
}

.breadcrumbs li a:hover {
  text-decoration: underline;
}

.breadcrumbs li::after {
  pointer-events: none;
  content: "〉";
  font-size: 10px;
  margin-left: 14px;
  opacity: 0.4;
}

.breadcrumbs li:last-child::after {
  display: none;
}

/* /////////////////////////// */
/* ///// SECTION WRAPPER ///// */
/* /////////////////////////// */

.section-wrap {
  position: relative;
  width: 100%;
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding: 80px var(--side-paddings-l) 100px;
}

.article__additional-wrap {
  width: 100%;
  max-width: var(--section-max-width);
  margin: 0 auto;
  /* margin-top: 80px; */
  margin-bottom: 100px;
  padding-left: var(--side-paddings-l);
  padding-right: var(--side-paddings-l);
}

/* /////////////////////////// */
/* //////// ARTICLE ////////// */
/* /////////////////////////// */

.article h1:first-child,
.article h2:first-child,
.article h3:first-child,
.article h4:first-child,
.article h5:first-child {
  margin-top: 0;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5 {
  margin-top: 40px;
}

.article p {
  margin-bottom: 32px;
}

.article img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}

.article p,
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
li {
  max-width: 740px;
}

li,
p {
  line-height: 1.5;
}

.article__additional {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin-top: 100px;
}

.article__additional__list li {
  font-size: 17px;
  margin-bottom: 24px;
  line-height: 140%;
}

.article__additional__list li a {
  text-decoration: none;
}

.article__additional__list li a:hover {
  text-decoration: underline;
}

/* /////////////////////////// */
/* //// ASK THE COMMUNITY //// */
/* /////////////////////////// */

.ask-the-community {
  display: flex;
  padding: 0 var(--side-paddings-l);
}

.ask-the-community__wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color: var(--clr-background-accent-grey);
  border-radius: var(--radius-l);
}

.ask-the-community__content {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  margin: 0 auto;
  padding: 72px var(--side-paddings-l) 100px;
  max-width: var(--section-max-width);
}

.ask-the-community__gradient {
  pointer-events: none;
  z-index: 0;
  position: absolute;
  width: 767px;
  height: 1002px;
  left: 40%;
  transform: translateX(-50%) rotate(-45deg);
  opacity: 0.6;
  top: -400px;

  background: radial-gradient(
    50% 50% at 50% 50%,
    #fdcebe 3.65%,
    rgba(253, 206, 190, 0) 100%
  );
}

.ask-the-community__text {
  margin-bottom: 40px;
}

/* /////////////////////////// */
/* ////////// OTHER ////////// */
/* /////////////////////////// */

/* SKIP NAVIGATION */

.skip-navigation {
  position: absolute;
  top: auto;
  z-index: -999;
  display: flex;
  overflow: hidden;
  left: -9000px;
}

/* PROMOTED ARTICLES */

.promoted-articles {
  display: flex;
  flex-direction: column;
}

.promoted-articles__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 48px;
  padding: 0;
  margin-bottom: 0;
  list-style: none;
}

.promoted-articles__item {
  flex: 1;
  margin-bottom: 0;
}

.promoted-articles__item a {
  line-height: 140%;
  text-decoration: none;
}

.promoted-articles__item a:hover {
  text-decoration: underline;
}

.recent-articles {
  display: flex;
  flex-direction: column;
}

/* CATEGORIES */

.categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 48px;
}

.category-list {
  display: flex;
  flex-direction: column;
}

.category-list__title a {
  text-decoration: none;
}

.category-list__title a:hover {
  text-decoration: underline;
}

.article-list,
.recent-articles ul,
.article__additional__list {
  list-style: none;
  padding: 0;
}

.article-list li,
.recent-articles li {
  font-size: 17px;
  margin-bottom: 24px;
  line-height: 140%;
}

.article-list li a,
.recent-articles li a {
  text-decoration: none;
}

.article-list li a:hover,
.recent-articles li a:hover {
  text-decoration: underline;
}

.article-list__promoted-label {
  user-select: none;
  margin-right: 6px;
}

/* /////////////////////////// */
/* //////// MAIN PAGE //////// */
/* /////////////////////////// */

/* MAINPAGE HERO */

.mainpage-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fcf5ed;
  padding-top: 120px;
  padding-left: var(--side-paddings-l);
  padding-right: var(--side-paddings-l);
  padding-bottom: 100px;
}

.help-domains {
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

/* ///////////////////// */
/* /////// PAGES /////// */
/* ///////////////////// */

/* MAINPAGE SEARCH */

.mainpage-hero__search-wrap {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80px;
}

.mainpage-hero__search-title {
  text-align: center;
  margin-bottom: 32px;
}

.mainpage-hero__search-form {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 60px;
}

.mainpage-hero__search-icon {
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.mainpage-hero__search-input {
  font-family: "ABCMarfa", sans-serif;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  -webkit-appearance: none;
  border-radius: 0;
  text-align: center;
  padding: 0 40px;

  font-size: 26px;
  font-weight: 200;

  transition: box-shadow 0.15s ease;
  box-shadow: 0 1px 0 0 var(--clr-border-primary-default);
}

.mainpage-hero__search-input:hover,
.mainpage-hero__search-input:focus {
  outline: none;
  box-shadow: 0 2px 0 0 var(--clr-border-primary-default);
}

.mainpage-hero__search-input::placeholder {
  color: rgba(0, 0, 0, 0.2);
}

.mainpage-hero__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.mainpage-hero__search-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  display: none;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mainpage-hero__search-clear:hover {
  opacity: 1;
}

/* MAINPAGE HELP DOMAINS */

.help-domains {
  width: 100%;
  max-width: 900px;
}

.help-domains__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: var(--radius-l);
  text-decoration: none;
  transition: all 0.2s ease;
}

.help-domains__card:hover {
  text-decoration: none;
  background-color: white;
}

.help-domains__card:hover .help-domains__card__icon {
  transform: scale(0.9) translateY(4px);
}

.help-domains__card__icon {
  margin-top: 8px;
  margin-bottom: 32px;
  transition: all 0.16s ease;
}

.help-domains__card__title {
  font-size: 24px;
  font-weight: 200;
  margin: 0;
  margin-bottom: 16px;
}

/* MAINPAGE GRADIENTS */

.mainpage-hero__gradients {
  pointer-events: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mainpage-hero__gradient1 {
  position: absolute;
  width: 1240px;
  height: 1202px;
  left: 0%;
  top: -70px;
  transform: rotate(-45deg);
  background: radial-gradient(
    50% 50% at 50% 50%,
    #fdcebe 3.65%,
    rgba(253, 206, 190, 0) 100%
  );
  opacity: 0.4;
}

.mainpage-hero__gradient2 {
  position: absolute;
  width: 937px;
  height: 1173px;
  left: 30%;
  top: -400px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    #ff40b3 10.42%,
    rgba(255, 64, 179, 0) 100%
  );
  opacity: 0.1;
}

/* /////////////////////////// */
/* /////// PAGE HEADER /////// */
/* /////////////////////////// */

.page-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-background-accent-peach);
}

.page-header__wrap {
  position: relative;
  padding-top: 120px;
  padding-left: var(--side-paddings-l);
  padding-right: var(--side-paddings-l);
  padding-bottom: 100px;
  max-width: var(--section-max-width);
  width: 100%;
  margin: 0 auto;
}

.page-header__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page-header__title {
  margin-bottom: 0;
  max-width: 760px;
}

/* PAGE HEADER ARTICLE */

.page-header-article {
  background-color: var(--clr-background-accent-velvety);
}

.page-header__article__bio {
  margin-top: 40px;
}

.page-header__author__name {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 4px;
}

.page-header__author__name a {
  text-decoration: none;
}

.page-header__author__name a:hover {
  text-decoration: underline;
}

.page-header__article__uploaded {
  font-size: 14px;
  font-weight: 200;
  color: rgba(0, 0, 0, 0.5);
}

/* GRADIENTS */

.page-header__gradients {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-header__gradient1 {
  position: absolute;
  width: 937px;
  height: 1173px;
  left: 15%;
  top: -375px;
  transform: rotate(-45deg);
  opacity: 0.5;
  background: radial-gradient(
    50% 50% at 50% 50%,
    #fdcebe 10.42%,
    rgba(253, 206, 190, 0) 100%
  );
}

/* SEARCH PAGE */

.search-result__wrap {
  z-index: 1;
  position: relative;
}

.search-result__search {
  width: unset;
  max-width: 720px;
  margin-top: 60px;
  margin-left: 230px;
  margin-bottom: 90px;
}

.search-result__content {
  display: flex;
}

.search-result__categories {
  min-width: 190px;
  margin-right: 40px;
}

.search-results-count {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 48px;
  margin-top: 0;
  opacity: 0.3;
}

.search-results-list {
  list-style: none;
  padding: 0;
}

.search-results-filter__title {
  font-size: 24px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 32px;
  margin-left: 14px;
}

.search-results-filter__list {
  list-style: none;
  padding: 0;
}

.search-results-filter__item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.search-results-filter__item.is-active .search-results-filter__link {
  color: var(--clr-text-inverse);
  background-color: var(--clr-fill-primary-default) !important;
}

.search-results-filter__link:hover {
  background-color: rgba(20, 20, 20, 0.06);
}

.search-results-filter__count span {
  font-size: 14px;
  line-height: 1;
  padding: 4px;
  font-weight: 500;
  opacity: 0.5;
}

.search-results-filter__link {
  display: flex;
  text-decoration: none;
  font-size: 17px;
  font-weight: 200;
  padding: 10px 14px;
  border-radius: var(--radius-s);
}

.search-results-content {
  max-width: 720px;
}

.search-result__title a {
  font-weight: 500;
  text-decoration: none;
  line-height: 130%;
}

.result-article {
  margin-bottom: 52px;
}

.breadcrumbs--search-results {
  margin-top: 24px;
  opacity: 0.5;
}

.search-result__description em {
  font-style: normal;
  font-weight: 500;
  background-color: var(--clr-search-selection);
  padding: 0 4px;
  border-radius: var(--radius-s);
}

.search-page-gradients {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
}

.search-page-gradient1 {
  position: absolute;
  width: 767px;
  height: 1002px;
  left: 10%;
  top: -320px;
  transform: rotate(20deg);
  opacity: 0.12;

  background: radial-gradient(
    50% 50% at 50% 50%,
    #ff40b3 3.65%,
    rgba(255, 64, 179, 0) 100%
  );
}

.search-page-gradient2 {
  position: absolute;
  width: 937px;
  height: 1173px;
  left: 30%;
  top: -230px;
  transform: rotate(-45deg);
  opacity: 0.16;

  background: radial-gradient(
    50% 50% at 50% 50%,
    #ff6d40 10.42%,
    rgba(255, 109, 64, 0) 100%
  );
}

/* ////////////////////////// */
/* /////// PAGINATION /////// */
/* ////////////////////////// */

.pagination {
  /* margin-top: 60px; */
}

.pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination-list a {
  text-decoration: none;
}

.pagination-first a,
.pagination-prev a,
.pagination-next a,
.pagination-last a {
  font-size: 16px;
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid var(--clr-border-primary-default);
  margin-right: 8px;
  transition: border 0.2s ease-in-out;
}

.pagination-first a:hover,
.pagination-prev a:hover,
.pagination-next a:hover,
.pagination-last a:hover {
  border: 1px solid var(--clr-border-primary-interaction);
}

.pagination-next-icon,
.pagination-prev-icon,
.pagination-first-icon,
.pagination-last-icon {
  display: none;
}

.pagination-first-text::before {
  content: "|\2190\00a0";
  margin-right: 4px;
}

.pagination-last-text::after {
  content: "\00a0\2192|";
  margin-left: 4px;
}

.pagination-next-text::after {
  content: "\00a0\2192";
  margin-left: 4px;
}

.pagination-prev-text::before {
  content: "\2190\00a0";
  margin-right: 4px;
}

/* /////////////////////////// */
/* ////// ERRROR PAGE //////// */
/* /////////////////////////// */

.error-page {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.error-page__content {
  width: 100%;
  max-width: var(--section-max-width);
  padding: 60px var(--side-paddings-l);
}

/* /////////////////////////// */
/* //// NEW REQUEST PAGE ///// */
/* /////////////////////////// */

.new-request-page {
  padding-top: 120px;
}

.new-request-page__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.new-request-page__title {
  margin-bottom: 40px;
}

/* /////////////////////////// */
/* ///////// QUERIES ///////// */
/* /////////////////////////// */

@media only screen and (max-width: 1200px) {
  .help-domains {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
  }
}

@media only screen and (max-width: 1024px) {
  .xl-title {
    font-size: 60px;
  }
  .l-title {
    font-size: 42px;
  }
  .l-text {
    font-size: 22px;
  }

  .mainpage-hero {
    padding-left: var(--side-paddings-m);
    padding-right: var(--side-paddings-m);
    padding-bottom: 80px;
  }

  .section-wrap {
    padding: 80px var(--side-paddings-m) 80px;
  }

  .ask-the-community {
    padding: 0 var(--side-paddings-m);
  }

  .page-header__wrap {
    padding-left: var(--side-paddings-m);
    padding-right: var(--side-paddings-m);
    padding-bottom: 80px;
  }

  .article__additional-wrap {
    padding-left: var(--side-paddings-m);
    padding-right: var(--side-paddings-m);
  }

  .search-result__search {
    margin-left: 0;
    max-width: initial;
  }

  .error-page__content {
    padding: 60px var(--side-paddings-m);
  }

  .new-request-page {
    padding-top: 120px;
  }

  .article__table-wrap {
    margin: 16px calc(var(--side-paddings-m) * -1);
    padding: 0 var(--side-paddings-m);
  }
}

@media only screen and (max-width: 640px) {
  .xl-title {
    font-size: 44px;
  }
  .l-title {
    font-size: 38px;
  }

  .l-text {
    font-size: 17px;
  }
  
  .help-domains {
    grid-template-columns: 1fr 1fr;
  }

  .mainpage-hero {
    padding-left: var(--side-paddings-s);
    padding-right: var(--side-paddings-s);
    padding-bottom: 60px;
  }

  .promoted-articles__list {
    grid-template-columns: 1fr 1fr;
  }

  .section-wrap {
    padding: 60px var(--side-paddings-s) 60px;
  }

  .ask-the-community {
    padding: 0;
  }

  .ask-the-community__wrapper {
    border-radius: 0;
  }

  .ask-the-community__content {
    padding: 80px var(--side-paddings-s);
  }

  .page-header__wrap {
    padding-left: var(--side-paddings-s);
    padding-right: var(--side-paddings-s);
    padding-bottom: 60px;
  }

  .categories {
    grid-template-columns: 1fr;
  }

  .page-header__search-input {
    width: 100%;
  }

  .page-header__search-input:hover,
  .page-header__search-input:focus {
    width: 100%;
  }

  .article__additional {
    grid-template-columns: 1fr;
  }

  .article__additional-wrap {
    padding-left: var(--side-paddings-s);
    padding-right: var(--side-paddings-s);
  }

  .search-result__content {
    flex-direction: column;
  }

  .search-result__categories {
    margin-right: 0;
    margin-bottom: 32px;
  }

  .search-results-filter__list {
    margin: 0 calc(var(--side-paddings-s) / -1);
    padding: 0 var(--side-paddings-s);
    display: flex;
    overflow-x: scroll;
  }

  .search-results-filter__list::-webkit-scrollbar {
    width: 0; /* Remove scrollbar space */
    background: transparent; /* Optional: just make scrollbar invisible */
  }

  .search-results-filter__item {
    white-space: nowrap;
    margin-right: 8px;
  }

  .search-results-filter__title {
    display: none;
  }

  .pagination-list {
    flex-wrap: wrap;
  }

  .pagination-list a {
    margin-bottom: 8px;
  }

  .error-page__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 60px var(--side-paddings-s);
  }

  .new-request-page {
    padding-top: 100px;
  }

  .article__table-wrap {
    margin: 16px calc(var(--side-paddings-s) * -1);
    padding: 0 var(--side-paddings-s);
  }
}

@media only screen and (max-width: 480px) {
  .help-domains {
    grid-template-columns: 1fr;
  }

  .promoted-articles__list {
    grid-template-columns: 1fr;
  }
}