#services{.yellow-container {background-color: var(--brand-yellow); grid-row: 3 / 4; article {grid-column: 2 / -2; display: flex; gap: var(--spacing-2xl); align-items: center; flex-direction: column; justify-content: center; padding: var(--spacing-2xl) 0; img {width: clamp(96px,20vw,140px);}}} .one-plus-one {grid-row: 3 / 5; article {grid-column: 1 / -1;} img {width: clamp(96px,20vw,140px); margin: var(--spacing-xl) 0;}} h2 {margin-top: 0; margin-bottom: 0;} .good-at {h2 {grid-column: 2 / -1;}} #design {article {grid-column: 2 / span 5; padding-bottom: var(--spacing-xl);}} #teknologi {article {grid-column: 6 / span 5; padding-bottom: var(--spacing-xl);}} #design__image,#teknologi__image {img {grid-column: 1 / -1; width: clamp(320px,50vw,600px); aspect-ratio: 1/1; object-fit: cover; align-self: center;}} #teknologi__image > img {justify-self: end;} .green-container {background-color: var(--brand-light-green); display: grid; grid-template-columns: subgrid; article {grid-column: 1 / 5; display: flex; flex-direction: column; padding: var(--spacing-2xl);}} .img-lg {height: 600px; aspect-ratio: 1/1; object-fit: cover; width: fit-content;} @media screen and (max-width: 768px) {.yellow-container {grid-row: unset !important; grid-column: 1 / -1; article {grid-column: 2 / -2; padding: var(--spacing-lg) 0; gap: var(--spacing-lg);}} .one-plus-one {grid-row: unset !important; grid-column: 2 / -2; article {padding: 0;}} .good-at {h2 {grid-column: 2 / -1;}} #design,#teknologi {grid-row: unset !important; article {grid-column: 2 / -2;}} #design__image,#teknologi__image {grid-row: unset !important; img {grid-column: 1 / -1; max-width: 400px;}}} @media screen and (min-width: 1280px) {.yellow-container {article {grid-column: 3 / -2;}} .good-at {h2 {grid-column: 3 / -1;}} #design {article {grid-column: 3 / span 4;}} #teknologi {article {grid-column: 5 / span 4;}}}}