html, body{
  background: #fff;
  color: #333;
  font: 16px/1.5 Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.wrap{
  max-width: 960px;
  margin: 0 auto;
}

.ctr{ text-align: center; }
.lft{ text-align: left; }
.rgt{ text-align: right; }

.input{
  border: 0;
  display: block;
  box-sizing: border-box;
  padding: 3px 5px;
  font-family: sans-serif;
  &--full{
    width: 100%;
  }
}

textarea{
  min-width: 100%;
  min-height: 55px;
}
button.button{
  display: block;
  width: 100%;
  padding: 5px 10px;
  font-weight: bold;
}

.tippy-tooltip{
  p{
    margin-top: 0px;
    margin-bottom: 10px;
  }
}

label{
  font-size: 0.65rem;
}

pre{
  white-space: pre-wrap;
  font-size: 0.65rem;
  &.code{
    position: relative;
    padding: 15px 7px 10px 7px;
    background: #fafafa;
    &:before{
      content: 'Code';
      position: absolute;
      top: 1px;
      font-size: 0.5rem;
      text-transform: uppercase;
      color: #ccc;
    }
    &-html{
      &:before{
        content: 'HTML';
      }
    }
    &-js{
      &:before{
        content: 'JavaScript';
      }
    }
  }
}

.demo--area{
  background: #eee;
  display: flex;
  min-height: 220px;
  position: relative;
  box-sizing: border-box;
  padding: 5px 10px;
  &-cont{
    box-sizing: border-box;
    flex: 1;
    align-self: center;
    // border: 10px solid;
  }
  &-label{
    position: absolute;
    top: 0;
    right: 4px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    color: #aaa;
  }
}

$grid-gap: 10px;
.grid{
  display: grid;
  grid-template-columns: calc(60% - #{$grid-gap/2}) calc(40% - #{$grid-gap/2});
  grid-column-gap: $grid-gap;
  .grid--col{
    box-sizing: border-box;
    // background: #f00;
    padding: 20px;
  }
}

#footer{
  background: #eaeaea;
  .grid{
    display: grid;
    grid-template-columns: calc(50% - #{$grid-gap/2}) calc(50% - #{$grid-gap/2});
    grid-column-gap: $grid-gap;
    .grid--col{
    }
  }
}

@media screen and (max-width: 960px){
  .wrap{
    padding-right: 7px;
    padding-left: 7px;
  }
}
@media screen and (max-width: 640px){
  .iblock-if-mobile{
    display: inline-block;
  }
  .grid{
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 0;
    grid-row-gap: 10px;
    .grid--col{
      padding: 0;
    }
  }
}
