:global {
  @home-board-prefix: home-board;

  .@{home-board-prefix} {
    width : 100%;
    height: 100%;

    &.fullscreen {
      .@{home-board-prefix}__left {
        width: 0;
      }

      .@{home-board-prefix}__center {
        width: 100%;

        .@{home-board-prefix}__center-top {
          height: 100%;
        }

        .@{home-board-prefix}__center-bottom {
          height: 0;
        }
      }

      .@{home-board-prefix}__right {
        width: 0;
      }
    }

    &__left {
      float     : left;
      width     : 254px;
      height    : ~'calc(100% + 4px)';
      margin    : -4px 0 0 -4px;
      overflow  : hidden;
      transition: width 0.4s ease;
    }

    &__center {
      float     : left;
      width     : ~'calc(100% - 250px - 270px)';
      height    : ~'calc(100% + 8px)';
      margin    : -4px 0;
      transition: width 0.4s ease;

      &-top {
        width     : 100%;
        height    : 50%;
        overflow  : hidden;
        transition: height 0.4s ease;
      }

      &-bottom {
        width     : 100%;
        height    : 50%;
        overflow  : hidden;
        transition: height 0.4s ease;

        &.full_height {
          height: 100%;
        }
      }
    }

    &__right {
      float     : right;
      width     : 270px;
      height    : ~'calc(100% + 8px)';
      margin    : -4px 0;
      overflow  : hidden;
      transition: width 0.4s ease;
    }
  }
}