@font-face {
  font-family: "ABCCompressed";
  src: url("../fonts/ABCGravityCompressed.woff2") format("woff2");
}
@font-face {
  font-family: "ABCItalic";
  src: url("../fonts/ABCGravityItalic.woff2") format("woff2");
}
.wallpaperContent .header {
  --header-top-compensator: 1rlh;
  --header-bottom-compensator: -8.5rlh;
}
@media screen and (max-width: 800px) {
  .wallpaperContent .header {
    --header-top-compensator: -2rlh;
  }
}
.wallpaperContent h1 {
  font-family: "ABCCompressed", sans-serif;
  text-transform: uppercase;
  margin-left: -0.01em;
}
.wallpaperContent h1 span {
  /* display: block; */
  font-family: "ABCItalic", sans-serif;
}
@media screen and (max-width: 800px) {
  .wallpaperContent h1 {
    --header-font-size: 48rlh;
    --header-line-height: 46rlh;
  }
  .wallpaperContent h1 span {
    display: inline;
  }
}


.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover .bgVideo {
  position: absolute!important;
  width: 100%;
  height: 100%;
}




/* Factoids */

.factoidIcon {
  display: block;
  background-color: currentColor;
  color: var(--text-color);
  -webkit-mask: var(--factoid-icon) left center / contain no-repeat;
  mask: var(--factoid-icon) left center / contain no-repeat;
}

.factoidCrisp {
  --factoid-icon: url("/_files/images/factoid-crisp.svg");
  aspect-ratio: 189.57 / 228;
}
.factoidLoop {
  --factoid-icon: url("/_files/images/factoid-loop.svg");
  aspect-ratio: 163 / 83;
}
.factoidBattery {
  --factoid-icon: url("/_files/images/factoid-battery.svg");
  aspect-ratio: 142 / 81;
}
.factoidSlop {
  --factoid-icon: url("/_files/images/factoid-slop.svg");
  aspect-ratio: 334.29 / 71;
}

/* Factoid cards */
.grid > .factoid .container {
  overflow: visible!important;
  flex-direction: column;
  justify-content: space-between;
}

.grid > .factoid .caption .text {
  margin-top: var(--margin-text);
}

.grid > .factoid h2 {
  --header-font-size: 55rlh;
  --header-line-height: 50rlh;
}

.grid > .factoid:has(.factoidCrisp) {
  grid-row: 2;
  grid-column: 4;
}
.grid > .factoid:has(.factoidLoop) {
  grid-row: 5;
  grid-column: 1;
}
.grid > .factoid:has(.factoidBattery) {
  grid-row: 8;
  grid-column: 4;
}
.grid > .factoid:has(.factoidSlop) {
  grid-row: 11;
  grid-column: 1;
}

@media screen and (max-width: 800px) {
  .grid > .factoid h2 {
    --header-font-size: 44rlh;
    --header-line-height: 44rlh;
  }

  .grid > .factoid:has(.factoidCrisp) {
    grid-row: 4;
    grid-column: 2;
  }
  .grid > .factoid:has(.factoidLoop) {
    grid-row: 8;
    grid-column: 1;
  }
  .grid > .factoid:has(.factoidBattery) {
    grid-row: 12;
    grid-column: 2;
  }
  .grid > .factoid:has(.factoidSlop) {
    grid-row: 16;
    grid-column: 1;
  }
}

/* Wallpaper factoids */

.wallpaperFactoids .inner {
  width: 100%;
  height: 32rlh;
  display: flex;
  align-items: center;
}
.wallpaperFactoids .inner span {
  height: 100%;
}

@media screen and (max-width: 800px) {
  .wallpaperFactoids {
    row-gap: var(--margin-meaning);
    margin-top: var(--margin-meaning);
  }
}

/* Варианты обоев */
.wallpaperVariants {
  margin: calc(var(--margin-grid) - 5rlh) 0;
}

.wallpaperVariants > menu {
  gap: var(--margin-grid-half);
  padding-top: 5rlh!important;
  padding-bottom: 5rlh!important;
}

/* Убираем сдвиг li */
.wallpaperVariants li {
  margin-block: 0;
}

.wallpaperVariant {
  display: block;
  width: 40rlh;
  height: 40rlh;
  border-radius: 50%;
  overflow: hidden;
}

.wallpaperVariant > .image,
.wallpaperVariant > .image > picture {
  width: 100%;
  height: 100%;
}

.wallpaperVariant > .image {
  --w: 100% !important;
}

.wallpaperVariants li.selected::after {
  content: none;
}

.wallpaperVariants .wallpaperVariant.disabled {
  outline: 2rlh solid currentColor;
  outline-offset: 3rlh;
}



.grid.wallpaperCover {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  justify-items: center;
}

.wallpaperMedia {
  position: relative;
  aspect-ratio: .55;
  height: 100%;
  overflow: hidden;
}

body.wallpaperFullscreen {
  overflow: hidden;
}

.wallpaperMedia:fullscreen,
body.wallpaperFullscreen .wallpaperMedia {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  background: black;
  cursor: zoom-out;
}

.wallpaperMedia:fullscreen > svg,
body.wallpaperFullscreen .wallpaperMedia > svg {
  opacity: .5;
}

.wallpaperMedia::backdrop {
  background: black;
}

.wallpaperMedia svg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: auto;
}

.wallpaperMedia picture {
  width: 100%!important;
}

.wallpaperMedia > .image:last-child,
.wallpaperMedia > .image:last-child > video,
.wallpaperMedia > .image:last-child > picture {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 500px) {
  .wallpaperMedia {
    max-width: 420rlh;
  }
}
@media screen and (max-width: 800px) {
  .wallpaperMedia {
    max-height: 70vh;
    cursor: zoom-in;
  }
}

.wallpaperInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: var(--margin-grid);
  /* Для скроллящегося блока превью */
  width: 100%;
  min-width: 0;
}

.wallpaperInstall {
  max-width: 60%;
}

.wallpaperInstall .buttons {
  margin-top: var(--margin-text);
}

.wallpaperInstall .googlePlay > .image {
  max-width: 270rlh;
}

.wallpaperInstall .qr {
  max-width: 81rlh;
  height: auto;
}

/* КНОПКИ */
.buttons {
  display: flex;
  gap: var(--margin-grid-half);
}

.buttons > .l {
  flex: 1;
}

.buttons.fixed {
  position: fixed;
  z-index: 100;
  top: var(--margin-grid-half);
  right: calc(var(--margin-grid) - 0.5rlh);
  flex-direction: row;
  align-items: flex-end;
  transition: 0.15s;
  margin-top: 0;
}

.buttons .googlePlay {
  position: relative;
}

.buttons .googlePlay > .image:nth-child(1),
.buttons .googlePlay > .image:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 200ms;
}

.buttons .googlePlay:hover > .image:nth-child(1),
.buttons .googlePlay:hover > .image:nth-child(2) {
  opacity: 1;
  transition: 0s;
}

.darkmode .buttons .googlePlay > .image:nth-child(2),
.darkmode .buttons .googlePlay > .image:nth-child(3) {
  filter: invert(1);
}

.buttonSecondary {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25rlh;
  font-size: var(--paragraph-font-size);
  user-select: none;
  text-decoration: none;
  background-color: var(--text-color);
}
.buttonSecondary p {
  color: var(--background-color);
}
.buttonSecondary:hover {
  background-color: var(--hover-color);
  cursor: pointer;
}
.buttonSecondary:hover p {
  color: white;
}

.buttons .googlePlay:active,
.buttonSecondary:active {
  opacity: .8;
}


@media screen and (max-width: 800px) {
  footer {
    padding-bottom: calc(80px + var(--margin-grid) * 2);
  }

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

  .wallpaperInfo {
    height: auto;
    padding-bottom: var(--margin-grid);
  }

  .wallpaperTitle {
    margin-top: var(--margin-grid-half);
  }

  .wallpaperDescription {
    max-width: none;
  }

  .buttons.fixed {
    left: var(--margin-grid);
    bottom: calc(var(--margin-grid) + var(--cookie-consent-offset, 0px));
    right: unset;
    top: unset;
  }

  .buttons .qr {
    display: none;
  }
}



/* Cookie consent */
body {
  padding-bottom: var(--cookie-consent-offset, 0px);
}

.cookieConsent {
  --text-color: black;
  --background-color: white;
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--text-color);
  background-color: var(--background-color);
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: var(--margin-grid);
  align-items: center;
  padding: var(--margin-grid-half) var(--margin-grid);
}

.cookieConsent button {
  color: currentColor;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  min-height: 62rlh;
  padding: 0 var(--margin-grid);
  color: var(--background-color)!important;
  background-color: var(--text-color)!important;
  border-radius: 100rlh;
}
.cookieConsentAccept p {
  color: inherit;
}

.cookieConsentAccept:active,
.cookieConsentReject:active {
  opacity: .8;
}

.cookieConsentAccept:hover {
  background-color: var(--hover-color)!important;
}

@media screen and (max-width: 800px) {
  .cookieConsent {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--margin-text) var(--margin-grid-half) var(--margin-grid);
  }

  .cookieConsentAccept {
    grid-column: 1 / -1;
  }
}






.hidden {
  opacity: 0;
  pointer-events: none;
}