.app-takeover {
  --takeover-column-width: 1024px;
}

@media screen and (min-width: 64em) {
  .app-takeover {
    padding: 100px 0 0;
  }
}

.app-takeover .header {
  z-index: 2;
  position: relative;
  max-width: var(--takeover-column-width);
}

.app-takeover .content {
  z-index: 1;
  max-width: var(--takeover-column-width);
}

.app-takeover .footer {
  z-index: 1;
  max-width: var(--takeover-column-width);
}

@media screen and (min-width: 64em) {
  .app-takeover .top-header {
    display: none;
  }
}

.app-takeover .top-header--inner {
  display: none;
}

.app-takeover .menu-top.menu-opened {
  position: absolute;
}

.app-takeover .promo-page {
  padding: 0;
}

.app-takeover .article--aside {
  display: none;
}

.app-takeover .article.article_aside {
  max-width: initial;
  margin: initial;
}

@media screen and (min-width: 64em) {
  .app-takeover .article.article_aside {
    gap: 0;
    display: flex;
    align-items: center;
    padding: 45px 30px 40px 30px;
  }
}

.app-takeover .article.article_aside .article--inner {
  max-width: 994px;
}

@media screen and (min-width: 64em) {
  .app-takeover .aside-bestroom-widget_mobile {
    display: initial;
  }
}

@media screen and (min-width: 64em) {
  .app-takeover .aside-bestroom--grid {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
  }
}

@media screen and (min-width: 64em) {
  .app-takeover .aside-bestroom-card--description {
    display: initial;
  }
}

@media screen and (min-width: 64em) {
  .app-takeover .aside-bestroom-card--link {
    display: none;
  }
}

@media screen and (min-width: 64em) {
  .app-takeover .aside-bestroom-card {
    padding: 19px 15px 23px 19px;
    border-width: 1px 0 1px 0;
  }
}

@media screen and (min-width: 64em) {
  .app-takeover .article {
    padding: 45px 30px 40px;
  }
}

.app-takeover .content_feed {
  padding: 0 15px 56px;
}

@media screen and (min-width: 64em) {
  .app-takeover .content_feed {
    padding: 0 30px 84px;
  }
}

.app-takeover .bonus-widget {
  display: none;
}

.app-takeover:has(.takeover_simple) {
  padding: 0;
}

@media screen and (min-width: 64em) {
  .app-takeover:has(.takeover_simple) .top-header {
    display: flex;
  }
}

.app-takeover:has(.takeover_simple) .top-header--inner {
  display: flex;
}

.app-takeover:has(.takeover_simple) .takeover--inner {
  background-size: 1920px;
}

@media screen and (min-width: 1921px) {
  .app-takeover:has(.takeover_simple) .takeover--inner {
    background-size: cover;
  }
}

.app-takeover .mobile-top--promo {
  display: none;
}

.app-takeover .menu-top--promo {
  display: none;
}

@media screen and (min-width: 64em) {
  .app-takeover .menu-top--item:not(:last-child) {
    margin: 0 20px 0 0;
  }
}

.takeover {
  cursor: pointer;
}

.takeover--inner {
  z-index: 0;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  background-attachment: fixed;
  background-color: #2e2e2e;
  background-position: 50% 0;
}

.takeover--top {
  display: flex;
  z-index: 3;
  position: fixed;
  bottom: 0;
  justify-content: center;
  width: 100%;
  max-width: 1024px;
}

@media screen and (min-width: 64em) {
  .takeover--top {
    top: 0;
    bottom: initial;
    left: 50%;
    height: 100px;
    transform: translateX(-50%);
  }
}

.takeover-wrap {
  display: none;
  width: 100%;
  max-width: 768px;
}

@media screen and (min-width: 48em) {
  .takeover-wrap {
    aspect-ratio: 1024 / 100;
    display: flex;
    max-width: 1024px;
  }
}

.takeover-wrap_mobile {
  aspect-ratio: 768 / 120;
  display: flex;
}

@media screen and (min-width: 48em) {
  .takeover-wrap_mobile {
    display: none;
  }
}

.takeover-wrap img {
  width: 100%;
}

.takeover-wrap video {
  width: 100%;
}

.takeover--grid {
  display: none;
  grid-template-columns: 1fr var(--takeover-column-width) 1fr;
  align-items: center;
  width: 100%;
  max-width: calc(var(--takeover-column-width) + 360px);
  height: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 70.625em) {
  .takeover--grid {
    display: grid;
  }
}

.takeover--center {
  width: 100%;
  max-width: var(--takeover-column-width);
}

.takeover--aside {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  height: 600px;
  padding: 0 10px;
}