img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}

.smallscreen {
  display: none;
}
.content {
  font-size: 1.875rem;
  color: #262626;
  background-size: 49% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.separator {
  font-size: 1.875rem;
  padding: 1.618em 0;
  text-align: center;
  background: rgba(143,77,255,0);
  color:#fff;
}
.separatororange {
  font-size: 1.875rem;
  padding: 1.618em 0;
  text-align: center;
  background: rgba(143,77,255,0);
  color:#fff;
}
.right {
  padding: 1.618em 6.472em 3.236em 50%;
  background-position: 0 50%;
}
.left {
  padding: 1.618em 50% 3.236em 6.472em;
  background-position: 100% 50%;
}
.illustration_01 {
  background-color: #00c17b;
  background-image: url("../images/minipadwhite.jpg");
}
.illustration_02 {
  background-color: #e8697b;
  background-image: url("../images/minipadblack.jpg");
}
.illustration_03 {
  background-color: #14b29a;
  background-image: url("../images/miniwhite.jpg");
}
.illustration_04 {
  background-color: #80b9f1;
  background-image: url("../images/miniblack.jpg");
}
@media (max-width: 106.25rem) {
  .wrapper,
  .separator {
    font-size: 1.6875rem;
  }
}
@media (max-width: 93.75rem) {
  .content,
  .separator {
    font-size: 1.5rem;
  }
  .right {
    padding: 1.618em 4.854em 1.618em 50%;
  }
  .left {
    padding: 1.618em 50% 1.618em 4.854em;
  }
}
@media (max-width: 81.25rem) {
  .content,
  .separator {
    font-size: 1.3125rem;
  }
  .right {
    padding: 1.618em 3.236em 1.618em 45%;
    background-size: 44% auto;
    background-position: 0 55%;
  }
  .left {
    padding: 1.618em 45% 1.618em 3.236em;
    background-size: 44% auto;
    background-position: 100% 55%;
  }
}
@media (max-width: 68.75rem) {
  .content,
  .separator {
    font-size: 1.125rem;
  }
  .right {
    padding: 1.618em 3.236em 1.618em 40%;
    background-size: 39% auto;
    background-position: 0 60%;
  }
  .left {
    padding: 1.618em 40% 1.618em 3.236em;
    background-size: 39% auto;
    background-position: 100% 60%;
  }
}
@media (max-width: 50rem) {
  .smallscreen {
    display: block;
  }
  .right {
    padding: 1.618em 3.236em;
    background-image: none;
  }
  .left {
    padding: 1.618em 3.236em;
    background-image: none;
  }
}
@media (max-width: 31.25rem) {
  .right {
    padding: 1.618em 1.618em;
  }
  .left {
    padding: 1.618em 1.618em;
  }
}
@media (max-width: 12rem) {
  html {
    min-width: 12rem;
  }
}