DIVI

1

2
/* =========================================
BAUHAUS DIGITAL PAINTING
========================================= */

.bauhaus-painting {
position: relative;
width: 100%;
aspect-ratio: 1206 / 877;
background: #202020;
overflow: hidden;
}

/* =========================================
COLOR PALETTE
========================================= */

.bauhaus-painting .field-main {
background: #5b5d19;
}

.bauhaus-painting .field-light {
background: #b8b87b;
}

.bauhaus-painting .shape {
position: absolute;
}

.bauhaus-painting .field {
position: absolute;
}

.bauhaus-painting .circle-white,
.bauhaus-painting .bar,
.bauhaus-painting .rectangle-top-left,
.bauhaus-painting .rectangle-left,
.bauhaus-painting .rectangle-right {
background: #d9d9d9;
}

.bauhaus-painting .circle-green {
background: #4c693e;
}

.bauhaus-painting .circle-red {
background: #704443;
}

/* =========================================
LARGE BACKGROUND GRID / FIELD
========================================= */

.field-main {
left: 6.6%;
top: 25.4%;
width: 86.0%;
height: 53.9%;
}

.field-light {
left: 6.6%;
top: 25.4%;
width: 8.6%;
height: 53.9%;
}

/* =========================================
LARGE RECTANGLES
========================================= */

.rectangle-top-left {
left: 6.6%;
top: 6.8%;
width: 8.6%;
height: 10.0%;
}

.rectangle-left {
left: 18.5%;
top: 6.8%;
width: 8.6%;
height: 67.1%;
}

.rectangle-right {
left: 67.9%;
top: 6.8%;
width: 13.7%;
height: 86.1%;
}

/* =========================================
GREEN CIRCLE
========================================= */

.circle-green {
left: 28.7%;
top: 10.8%;
width: 9.2%;
aspect-ratio: 1;
border-radius: 50%;
}

/* =========================================
REPEATED WHITE CIRCLES
========================================= */

.circle-white {
width: 8.5%;
aspect-ratio: 1;
border-radius: 50%;
}

.circle-1 {
left: 28.8%;
top: 28.8%;
}

.circle-2 {
left: 28.8%;
top: 44.0%;
}

.circle-3 {
left: 28.8%;
top: 59.2%;
}

.circle-4 {
left: 28.8%;
top: 74.3%;
}

/* =========================================
VERTICAL BAR SYSTEM
========================================= */

.bar {
top: 6.8%;
height: 79.0%;
width: 2.9%;
}

.bar-1 {
left: 39.4%;
}

.bar-2 {
left: 44.6%;
}

.bar-3 {
left: 49.7%;
}

.bar-4 {
left: 55.8%;
}

.bar-5 {
left: 61.0%;
}

/* =========================================
RED / BROWN CIRCLE
========================================= */

.circle-red {
left: 73.0%;
top: 42.9%;
width: 18.5%;
aspect-ratio: 1;
border-radius: 50%;
}

/* =========================================
DESKTOP
========================================= */

@media (min-width: 981px) {

.bauhaus-painting {
max-width: 1206px;
margin: 0 auto;
}

}

/* =========================================
TABLET
========================================= */

@media (max-width: 980px) {

.bauhaus-painting {
aspect-ratio: 4 / 3;
}

/* Make the composition slightly more compact */
.field-main {
left: 5%;
width: 90%;
top: 27%;
height: 48%;
}

.field-light {
left: 5%;
width: 11%;
top: 27%;
height: 48%;
}

.rectangle-top-left {
left: 5%;
top: 7%;
width: 11%;
height: 11%;
}

.rectangle-left {
left: 20%;
top: 7%;
width: 10%;
height: 60%;
}

.rectangle-right {
left: 70%;
top: 7%;
width: 17%;
height: 82%;
}

.circle-green {
left: 31%;
top: 12%;
width: 10%;
}

.circle-white {
width: 9%;
}

.circle-1 {
left: 30.5%;
top: 31%;
}

.circle-2 {
left: 30.5%;
top: 45%;
}

.circle-3 {
left: 30.5%;
top: 59%;
}

.circle-4 {
left: 30.5%;
top: 73%;
}

.bar {
top: 7%;
height: 77%;
width: 3.3%;
}

.bar-1 {
left: 40%;
}

.bar-2 {
left: 46%;
}

.bar-3 {
left: 52%;
}

.bar-4 {
left: 58%;
}

.bar-5 {
left: 64%;
}

.circle-red {
left: 74%;
top: 43%;
width: 19%;
}
}

/* =========================================
PHONE
========================================= */

@media (max-width: 767px) {

.bauhaus-painting {
aspect-ratio: 3 / 4;
}

/* Background field becomes narrower */
.field-main {
left: 8%;
top: 30%;
width: 84%;
height: 40%;
}

.field-light {
left: 8%;
top: 30%;
width: 15%;
height: 40%;
}

/* Top-left square */
.rectangle-top-left {
left: 8%;
top: 7%;
width: 15%;
height: 8%;
}

/* Tall left rectangle */
.rectangle-left {
left: 28%;
top: 7%;
width: 14%;
height: 42%;
}

/* Right rectangle */
.rectangle-right {
left: 61%;
top: 7%;
width: 20%;
height: 70%;
}

/* Green circle */
.circle-green {
left: 42%;
top: 13%;
width: 13%;
}

/* White circles become a tighter vertical rhythm */
.circle-white {
width: 12%;
}

.circle-1 {
left: 41%;
top: 33%;
}

.circle-2 {
left: 41%;
top: 44%;
}

.circle-3 {
left: 41%;
top: 55%;
}

.circle-4 {
left: 41%;
top: 66%;
}

/* Vertical bars */
.bar {
top: 8%;
height: 70%;
width: 4%;
}

.bar-1 {
left: 48%;
}

.bar-2 {
left: 54%;
}

.bar-3 {
left: 60%;
}

.bar-4 {
left: 66%;
}

.bar-5 {
left: 72%;
}

/* Red circle */
.circle-red {
left: 65%;
top: 48%;
width: 25%;
}
}

┌─────────────────────────────────────┐
│ ■ ▯ ● ▯ ▯ ▯ ▯ ▯ ▯ │
│ │
│ █████████████████████████████████ │
│ █ █ ○ │ │ │ │ │ █ ● │
│ █ █ ○ │ │ │ │ │ █ │
│ █ █ ○ │ │ │ │ │ █ │
│ █ █ ○ │ │ │ │ │ █ │
│ █████████████████████████████████ │
└─────────────────────────────────────┘