{"id":1091,"date":"2023-03-30T20:43:18","date_gmt":"2023-03-30T17:43:18","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1091"},"modified":"2023-04-08T04:18:42","modified_gmt":"2023-04-08T01:18:42","slug":"digital-walls","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1091\/","title":{"rendered":"Digital Walls"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"904\" style=\"aspect-ratio: 1788 \/ 904;\" width=\"1788\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-30_19-29-33.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Montserrat:200,400&quot; rel=&quot;stylesheet&quot;&gt;\n\n  &lt;div class=&quot;app&quot;&gt;\n    &lt;header class=&quot;header&quot;&gt;\n      &lt;div class=&quot;header__left&quot;&gt;\n        &lt;span&gt;Digital Walls&lt;\/span&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;header__right&quot;&gt;\n        &lt;p&gt;Thu, 14 Jun | 16:20&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/header&gt;\n    \n    &lt;nav class=&quot;nav&quot;&gt;\n      &lt;ul class=&quot;nav__menu&quot;&gt;\n        &lt;li class=&quot;nav__item&quot;&gt;\n          &lt;a href=&quot;#vienna&quot; class=&quot;nav__link&quot; data-scroll-to&gt;\n            &lt;div class=&quot;media&quot;&gt;\n              &lt;img src=&quot;https:\/\/lonelyplanetimages.imgix.net\/mastheads\/stock-photo-st-stephens-church-112868985.jpg?sharp=10&amp;vib=20&amp;w=2000&quot; alt=&quot;&quot; class=&quot;media__img&quot;&gt;\n              &lt;p class=&quot;media__content&quot;&gt;\n                &lt;strong&gt;Vienna&lt;\/strong&gt;&lt;br \/&gt;\n                Austria\n              &lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav__item&quot;&gt;\n          &lt;a href=&quot;#lisbon&quot; class=&quot;nav__link&quot; data-scroll-to&gt;\n            &lt;div class=&quot;media&quot;&gt;\n              &lt;img src=&quot;https:\/\/lonelyplanetimages.imgix.net\/mastheads\/54989636.jpg?sharp=10&amp;vib=20&amp;w=2000&quot; alt=&quot;&quot; class=&quot;media__img&quot;&gt;\n              &lt;p class=&quot;media__content&quot;&gt;\n                &lt;strong&gt;Lisbon&lt;\/strong&gt;&lt;br \/&gt;\n                Portugal\n              &lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav__item&quot;&gt;\n          &lt;a href=&quot;#newyork&quot; class=&quot;nav__link&quot; data-scroll-to&gt;\n            &lt;div class=&quot;media&quot;&gt;\n              &lt;img src=&quot;https:\/\/lonelyplanetimages.imgix.net\/mastheads\/GettyImages-538096543_medium.jpg?sharp=10&amp;vib=20&amp;w=2000&quot; alt=&quot;&quot; class=&quot;media__img&quot;&gt;\n              &lt;p class=&quot;media__content&quot;&gt;\n                &lt;strong&gt;New York&lt;\/strong&gt;&lt;br \/&gt;\n                USA\n              &lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/a&gt;\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n    \n    &lt;main class=&quot;main&quot;&gt;\n      &lt;article class=&quot;section&quot; id=&quot;vienna&quot; data-section&gt;\n        &lt;header class=&quot;section__header&quot; style=&quot;background-image: url('https:\/\/lonelyplanetimages.imgix.net\/mastheads\/stock-photo-st-stephens-church-112868985.jpg?sharp=10&amp;w=2000');&quot;&gt;\n          &lt;h1 class=&quot;section__title&quot;&gt;Vienna&lt;\/h1&gt;\n          &lt;p class=&quot;section__subtitle&quot;&gt;48.21\u00b0N, 16.36\u00b0E&lt;\/p&gt;\n          &lt;div class=&quot;section__controls&quot;&gt;\n            &lt;button class=&quot;btn btn--prev&quot; title=&quot;Previous&quot;&gt;\n              &lt;span class=&quot;arrow arrow--left&quot;&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;button class=&quot;btn btn--next&quot; title=&quot;Next&quot;&gt;\n              &lt;span class=&quot;arrow arrow--right&quot;&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;div class=&quot;user&quot;&gt;\n              &lt;img src=&quot;https:\/\/source.unsplash.com\/200x200\/?people&quot; class=&quot;user__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;span class=&quot;user__name&quot;&gt;Jamie&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/header&gt;\n        &lt;div class=&quot;section__content&quot;&gt;\n          &lt;ul class=&quot;boxgrid&quot;&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--weather&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;27\u00b0C&lt;\/span&gt;&lt;br \/&gt;Cloudy&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--wide&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/600x400\/?nature&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?people&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--cost&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;120\u20ac&lt;\/span&gt;&lt;br \/&gt;Daily cost&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--video&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?art&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--locations&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;189&lt;\/span&gt;&lt;br \/&gt;Locations&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/article&gt;\n  \n      &lt;article class=&quot;section&quot; id=&quot;lisbon&quot; data-section&gt;\n        &lt;header class=&quot;section__header&quot; style=&quot;background-image: url('https:\/\/lonelyplanetimages.imgix.net\/mastheads\/54989636.jpg?sharp=10&amp;w=2000');&quot;&gt;\n          &lt;h1 class=&quot;section__title&quot;&gt;Lisbon&lt;\/h1&gt;\n          &lt;p class=&quot;section__subtitle&quot;&gt;38.44\u00b0N, 09.82\u00b0W&lt;\/p&gt;\n          &lt;div class=&quot;section__controls&quot;&gt;\n            &lt;button class=&quot;btn btn--prev&quot; title=&quot;Previous&quot;&gt;\n              &lt;span class=&quot;arrow arrow--left&quot;&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;button class=&quot;btn btn--next&quot; title=&quot;Next&quot;&gt;\n              &lt;span class=&quot;arrow arrow--right&quot;&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;div class=&quot;user&quot;&gt;\n              &lt;img src=&quot;https:\/\/source.unsplash.com\/200x200\/?people&quot; class=&quot;user__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;span class=&quot;user__name&quot;&gt;Jamie&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/header&gt;\n        &lt;div class=&quot;section__content&quot;&gt;\n          &lt;ul class=&quot;boxgrid&quot;&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--weather&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;22\u00b0C&lt;\/span&gt;&lt;br \/&gt;Rain&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?nature&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--video&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?art&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--wide&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/600x400\/?technology&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--locations&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;272&lt;\/span&gt;&lt;br \/&gt;Locations&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--cost&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;80\u20ac&lt;\/span&gt;&lt;br \/&gt;Daily cost&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            \n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/article&gt;\n  \n      &lt;article class=&quot;section&quot; id=&quot;newyork&quot; data-section&gt;\n        &lt;header class=&quot;section__header&quot; style=&quot;background-image: url('https:\/\/lonelyplanetimages.imgix.net\/mastheads\/GettyImages-538096543_medium.jpg?sharp=10&amp;vib=20&amp;w=2000');&quot;&gt;\n          &lt;h1 class=&quot;section__title&quot;&gt;New York&lt;\/h1&gt;\n          &lt;p class=&quot;section__subtitle&quot;&gt;40.42\u00b0N, 74.02\u00b0W&lt;\/p&gt;\n          &lt;div class=&quot;section__controls&quot;&gt;\n            &lt;button class=&quot;btn btn--prev&quot; title=&quot;Previous&quot;&gt;\n              &lt;span class=&quot;arrow arrow--left&quot;&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;button class=&quot;btn btn--next&quot; title=&quot;Next&quot;&gt;\n              &lt;span class=&quot;arrow arrow--right&quot;&gt;&lt;\/span&gt;\n            &lt;\/button&gt;\n            &lt;div class=&quot;user&quot;&gt;\n              &lt;img src=&quot;https:\/\/source.unsplash.com\/200x200\/?nature&quot; class=&quot;user__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;span class=&quot;user__name&quot;&gt;Jamie&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/header&gt;\n        &lt;div class=&quot;section__content&quot;&gt;\n          &lt;ul class=&quot;boxgrid&quot;&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--wide&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/600x400\/?art&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--weather&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;30\u00b0C&lt;\/span&gt;&lt;br \/&gt;Sunny&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--video&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?art&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?people&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item boxgrid__item--push&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--locations&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;1.366&lt;\/span&gt;&lt;br \/&gt;Locations&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--cost&quot;&gt;\n                &lt;p&gt;&lt;span class=&quot;text--large&quot;&gt;150$&lt;\/span&gt;&lt;br \/&gt;Daily cost&lt;\/p&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li class=&quot;boxgrid__item&quot;&gt;\n              &lt;a href=&quot;#&quot; class=&quot;box box--image&quot;&gt;\n                &lt;img src=&quot;https:\/\/source.unsplash.com\/300x300\/?technology&quot; class=&quot;box__img&quot; alt=&quot;&quot; \/&gt;\n              &lt;\/a&gt;\n            &lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/article&gt;\n    &lt;\/main&gt;\n    \n    &lt;button class=&quot;scrollctrl scrollctrl--prev&quot; data-scroll-dir=&quot;prev&quot;&gt;\n      &lt;span class=&quot;arrow arrow--large arrow--up&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n    &lt;button class=&quot;scrollctrl scrollctrl--next&quot; data-scroll-dir=&quot;next&quot;&gt;\n      &lt;span class=&quot;arrow arrow--large arrow--down&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n  &lt;\/div&gt;\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbody {\n  min-height: 100vh;\n  height: 100%;\n  overflow: hidden;\n  color: #fff;\n  background-color: #121519;\n  font-family: &quot;Montserrat&quot;, &quot;Roboto&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n}\n\nul,\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}\n\na {\n  text-decoration: none;\n}\n\np {\n  margin: 1rem 0;\n}\n\n.app {\n  display: grid;\n  grid-template-rows: 4rem 1fr 4rem;\n  grid-template-columns: 20% 1fr;\n  height: 100vh;\n}\n\n.header,\n.footer {\n  font-size: 0.75rem;\n  font-weight: 200;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  color: #a0a0a0;\n}\n\n.header {\n  display: flex;\n  justify-content: space-between;\n  grid-column: 1\/-1;\n  padding: 0 2rem;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.header__left, .header__right {\n  display: flex;\n  align-items: center;\n}\n\n.main {\n  grid-column: 1\/-1;\n  padding: 2rem;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  perspective: 1px;\n  -ms-scroll-snap-type: block proximity;\n      scroll-snap-type: block proximity;\n  -ms-scroll-snap-destination: 0% 100%;\n      scroll-snap-destination: 0% 100%;\n  -ms-scroll-snap-points-y: repeat(100%);\n      scroll-snap-points-y: repeat(100%);\n}\n@media screen and (min-width: 1024px) {\n  .main {\n    grid-column: 2\/-1;\n  }\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  grid-column: 1\/-1;\n  padding: 0 2rem;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.footer p {\n  margin-right: 1rem;\n}\n.footer a {\n  color: #fff;\n}\n.footer a:hover, .footer a:focus {\n  text-decoration: underline;\n}\n.footer__more {\n  display: none;\n  margin-left: auto;\n  margin-right: 0;\n}\n@media screen and (min-width: 768px) {\n  .footer__more {\n    display: block;\n  }\n}\n\n.nav {\n  display: none;\n  border-right: 1px solid rgba(255, 255, 255, 0.1);\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n.nav__item:not(:last-child) {\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.nav__link {\n  display: block;\n  color: #fff;\n  font-weight: 200;\n}\n.nav__link:hover, .nav__link:focus {\n  background-color: rgba(255, 255, 255, 0.035);\n}\n@media screen and (min-width: 1024px) {\n  .nav {\n    display: block;\n    grid-column: 1\/2;\n  }\n}\n\n.section {\n  min-height: 500px;\n  min-height: calc(100vh - 4rem - 4rem);\n  padding-top: 300px;\n  margin-bottom: 250px;\n  position: relative;\n  transform-style: preserve-3d;\n  scroll-snap-align: start;\n}\n.section__header {\n  position: absolute;\n  top: 50px;\n  left: 0;\n  right: 0;\n  height: 500px;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center center;\n  text-shadow: 0 0 20px rgba(0, 0, 0, 0.25);\n}\n.section__header::after {\n  content: &quot;&quot;;\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);\n}\n.section__title {\n  font-size: 3.5rem;\n  font-weight: 200;\n  margin-bottom: 0.5rem;\n  line-height: 1;\n}\n.section__subtitle {\n  font-size: 1.5rem;\n}\n.section__controls {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  padding: 0 2rem;\n  top: 0;\n  left: 0;\n  right: 0;\n  transform: translateY(-50%);\n}\n.section__content {\n  position: relative;\n  z-index: 1;\n  padding: 0 1rem;\n}\n@media screen and (min-width: 1024px) {\n  .section {\n    margin-bottom: 750px;\n  }\n  .section__header {\n    transform: translateZ(-1px) scale(1.9);\n  }\n  .section__content {\n    padding: 0;\n    transform: translateZ(0);\n  }\n}\n\n.boxgrid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  grid-auto-rows: minmax(150px, auto);\n  grid-gap: 2rem 0.5rem;\n}\n.boxgrid__item {\n  display: flex;\n}\n.boxgrid__item--wide {\n  grid-column: span 2;\n}\n@media screen and (min-width: 1280px) {\n  .boxgrid__item--push {\n    grid-column: span 2;\n    padding-left: 50%;\n  }\n}\n\n.box {\n  display: flex;\n  flex: 1 0 0;\n  position: relative;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  color: #fff;\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);\n  transform: scale(1);\n  transition: all 0.25s ease;\n  filter: brightness(100%);\n}\n.box:hover, .box:focus {\n  transform: scale(1.07);\n  filter: brightness(110%);\n  z-index: 10;\n}\n.box--weather {\n  background-color: #89cdce;\n}\n.box--cost {\n  background-color: #66aee5;\n}\n.box--locations {\n  background-color: #6c73dc;\n}\n.box--image, .box--video {\n  padding: 0;\n}\n.box--video::before, .box--video::after {\n  content: &quot;&quot;;\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 10;\n  transform: translate(-50%, -50%);\n}\n.box--video::before {\n  width: 50px;\n  height: 50px;\n  background-color: #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 38px rgba(0, 0, 0, 0.3);\n}\n.box--video::after {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 10px 0 10px 15px;\n  border-color: transparent transparent transparent #121519;\n  margin-left: 2px;\n}\n.box__img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -o-object-position: center;\n     object-position: center;\n  border-radius: 0.5rem;\n}\n\n.scrollctrl {\n  display: none;\n  justify-content: center;\n  width: 50vw;\n  height: 50vw;\n  padding: 0;\n  position: fixed;\n  border-radius: 50%;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.7);\n  background-color: transparent;\n  left: 50%;\n  margin-left: -25%;\n}\n.scrollctrl:hover, .scrollctrl:focus {\n  background-color: rgba(255, 255, 255, 0.035);\n}\n.scrollctrl--prev {\n  top: 0;\n  padding-top: 44%;\n  align-items: flex-end;\n  transform: translateY(-42vw);\n}\n.scrollctrl--next {\n  bottom: 0;\n  padding-bottom: 44%;\n  transform: translateY(42vw);\n}\n@media screen and (min-width: 1024px) {\n  .scrollctrl {\n    display: flex;\n  }\n}\n\n.text--large {\n  font-size: 2rem;\n  font-weight: 200;\n}\n\n.arrow {\n  display: inline-block;\n  padding: 3px;\n  border-style: solid;\n  border-width: 0 2px 2px 0;\n}\n.arrow--large {\n  padding: 8px;\n  border-width: 0 1px 1px 0;\n}\n.arrow--right {\n  transform: rotate(-45deg);\n}\n.arrow--left {\n  transform: rotate(135deg);\n}\n.arrow--up {\n  transform: rotate(-135deg);\n}\n.arrow--down {\n  transform: rotate(45deg);\n}\n\n.media {\n  display: flex;\n  align-items: center;\n  padding: 2rem;\n}\n.media__img {\n  width: 60px;\n  height: 60px;\n  margin-right: 1rem;\n  border-radius: 0.25rem;\n  -o-object-position: center center;\n     object-position: center center;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.media__content {\n  margin: 0;\n}\n\n.user {\n  margin-left: auto;\n  text-align: center;\n  padding-top: 2rem;\n}\n.user__name {\n  display: block;\n  font-size: 1.5rem;\n  font-weight: 200;\n}\n.user__img {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  margin-bottom: 0.5rem;\n  box-shadow: 0 0 38px rgba(0, 0, 0, 0.3);\n}\n\n.btn {\n  display: flex;\n  flex: 0 0 50px;\n  justify-content: center;\n  align-items: center;\n  width: 50px;\n  height: 50px;\n  border: 0;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  background-color: #fff;\n  margin: 0 0.5rem;\n}\n\nbutton:focus {\n  outline: 0;\n  border-color: #66aee5;\n  box-shadow: 0 0 0 1px #66aee5;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const SELECTORS = {\n      section: &quot;[data-section]&quot;,\n      scrollTo: &quot;[data-scroll-to]&quot;,\n      scrollDir: &quot;[data-scroll-dir]&quot;\n    };\n    const sectionsArray = Array.from(document.querySelectorAll(SELECTORS.section));\n    const scrollToElements = document.querySelectorAll(SELECTORS.scrollTo);\n    const scrollDirElements = document.querySelectorAll(SELECTORS.scrollDir);\n    \n    let currentSectionIndex = 0;\n    \n    const getScrollTarget = (dir) =&gt; {\n      if (dir === &quot;prev&quot; &amp;&amp; currentSectionIndex &gt; 0) {\n        currentSectionIndex--;\n        return sectionsArray[currentSectionIndex];\n      }\n      if (dir === &quot;next&quot; &amp;&amp; currentSectionIndex &lt; sectionsArray.length - 1) {\n        currentSectionIndex++;\n        return sectionsArray[currentSectionIndex];\n      }\n      return false;\n    };\n    \n    scrollDirElements.forEach((el) =&gt; {\n      el.addEventListener(&quot;click&quot;, () =&gt; {\n        const direction = el.dataset.scrollDir;\n        const target = getScrollTarget(direction);\n    \n        if (target) {\n          target.scrollIntoView({ behavior: &quot;smooth&quot; });\n        }\n      });\n    });\n    \n    scrollToElements.forEach((el) =&gt; {\n      el.addEventListener(&quot;click&quot;, (e) =&gt; {\n        e.preventDefault();\n        const targetId = el.getAttribute(&quot;href&quot;);\n        const target = document.querySelector(targetId);\n    \n        if (target) {\n          sectionsArray.forEach((section, index) =&gt; {\n            if (section.id === targetId.replace(&quot;#&quot;, &quot;&quot;)) {\n              currentSectionIndex = index;\n            }\n          });\n          target.scrollIntoView({ behavior: &quot;smooth&quot; });\n        }\n      });\n    });\n    <\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1093,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[59],"class_list":["post-1091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-pet-proeject"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1091"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1091\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1091\/revisions\/1094"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1093"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}