+
So arbeite ich
-

+
diff --git a/styles.css b/styles.css
index 26d82be..3a9076e 100644
--- a/styles.css
+++ b/styles.css
@@ -18,6 +18,7 @@
--section-padding-x: clamp(2rem, 3.3vw, 3.5rem);
--section-padding-y: clamp(3.5rem, 5vw, 5.75rem);
--section-stack-padding-y: clamp(2.5rem, 4vw, 4rem);
+ --section-head-box-gap: clamp(1.9rem, 2.6vw, 2.6rem);
--grid-gap: 1.6rem;
--content-width-wide: 1320px;
--content-width-narrow: 1040px;
@@ -243,6 +244,11 @@ button {
margin: 0 auto 3rem;
}
+.section-head--boxed {
+ width: fit-content;
+ margin-bottom: var(--section-head-box-gap);
+}
+
.section-title {
font-size: clamp(2.6rem, 4.4vw, 4.3rem);
max-width: 10.5ch;
@@ -265,26 +271,31 @@ button {
.section-head--process {
position: relative;
- width: fit-content;
+}
+
+.section-head__accent {
+ position: absolute;
+ width: clamp(70px, 9vw, 120px);
+ margin: 0;
+ pointer-events: none;
}
.section-head__accent--process {
- position: absolute;
top: -5.2rem;
right: -5rem;
width: 78px;
- margin-top: 0;
}
.section-head__accent--focus {
- position: relative;
- top: calc(4.2rem + 40px);
- left: 9ch;
+ top: calc(100% - 0.15rem);
+ left: 72%;
+ transform: translateX(-50%);
}
-.section-head img {
- width: clamp(70px, 9vw, 120px);
- margin-top: -0.3rem;
+.section-head__accent--work {
+ top: calc(100% - 0.15rem);
+ left: 78%;
+ transform: translateX(-50%);
}
.process__grid,