/* Переключение макетов Одноклассники: 1920 / 768 / 360 */

.main-layout {
  display: none;
  width: 100%;
  overflow-x: hidden;
}

.main-layout--desktop {
  display: block;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .main-layout--desktop,
  .main-layout--360 {
    display: none !important;
  }

  .main-layout--768 {
    display: block !important;
    --layout-scale: min(1, 100vw / 768px);
  }

  .main-layout--768 > .element {
    width: 768px;
    min-width: 768px;
    max-width: 768px;
    margin: 0;
    position: relative;
    transform-origin: top left;
    margin-left: calc((100vw - 768px * var(--layout-scale)) / 2);
    transform: scale(var(--layout-scale));
    margin-bottom: calc(var(--layout-min-height) * -1 * (1 - var(--layout-scale)));
  }
}

@media (max-width: 767px) {
  .main-layout--desktop,
  .main-layout--768 {
    display: none !important;
  }

  .main-layout--360 {
    display: block !important;
    --layout-scale: calc(100vw / 360px);
  }

  .main-layout--360 > .element {
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    margin: 0;
    position: relative;
    transform-origin: top left;
    margin-left: 0;
    transform: scale(var(--layout-scale));
    margin-bottom: calc(var(--layout-min-height) * -1 * (1 - var(--layout-scale)));
  }
}

@media (min-width: 1200px) {
  .main-layout--768,
  .main-layout--360 {
    display: none !important;
  }
}