diff --git a/resources/css/blocks/chapter-section.css b/resources/css/blocks/chapter-section.css index 190eea8..a1c4944 100644 --- a/resources/css/blocks/chapter-section.css +++ b/resources/css/blocks/chapter-section.css @@ -1,8 +1,8 @@ .chapter-section { - @apply flex items-center justify-between gap-8 2xl:gap-12 !my-0 px-12; - @apply xl:py-32 2xl:py-48; - @apply max-w-screen-2xl; - @apply mx-auto; + @apply relative flex items-center justify-between gap-8 2xl:gap-12 !my-0; + @apply py-32 xl:py-32 2xl:py-48 px-32; + + @apply max-w-screen-2xl mx-auto; h2 { @apply title-small; @@ -10,12 +10,11 @@ h3 { @apply subtitle-big; } - &--right { @apply flex-row-reverse; } &--has-background { - @apply relative !py-12 xl:py-24 !my-12; + @apply relative py-12 xl:py-24 !my-12; } &__content { @apply max-w-3xl; @@ -49,6 +48,7 @@ @apply !h-12; } } + &__background { @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-full; z-index: 1; @@ -58,6 +58,15 @@ transform: scaleX(-1); } } + + &--width-full { + .chapter-section__background { + @apply !w-screen !top-0 !left-0; + transform: unset; + margin: 0 calc(50% - 50vw) !important; + } + } + > *:not(.chapter-section__background) { z-index: 2; }