/* PREVIEW 1 */
.preview1 {
    min-height: 40vh;
}
.preview1 .container {
  width: 400px;
  height: 200px;
  background-color: lightgray;
}

.preview1 .box {
  width: 50%;
  height: 100%;
  background-color: red;
}

/* PREVIEW 2 */
.preview2 {
    min-height: 40vh;
}
.preview2 .parent {
  width: 100%;
  height: 300px;
  background-color: lightgray;
}

.preview2 .child {
  width: 80%;
  height: 100%;
  background-color: red;
}

/* PREVIEW 3 */
.preview3 {
    min-height: 20vh;
}
.preview2 img {
  max-width: 100%;
 height: auto;
}

/* PREVIEW 4 */
.preview4 {
    min-height: 20vh;
}
.preview4 .text-container {
 font-size: 16px;
}

.preview4 .text {
 font-size: 120%;
}

/* PREVIEW 5 */
.preview5 {
    min-height: 600px;
    position: relative;
}

.preview5 .centered {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 300px;
 height: 300px;
 background-color: red;
}