@import "../../../utils"; @import "../../../style/fonts.module"; @import "../../../style/colors.module"; .LandingSection { background-image: url('#{$assetPath}/curves/courbe_1.png'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; min-height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: left; flex-wrap: wrap; .LeftSide { flex-basis: 50%; .Octopus { width: 55vw; height: 55vh; } } .RightSide { color: $primary_black; font-family: $primary_font; vertical-align: middle; flex-basis: 40%; margin-left: -15vw; .Title { font-size: 6.5rem; text-align: center; .Caption { font-size: 1.6rem; } } } } @media (max-width: 1440px) { .LandingSection { .RightSide { margin-left: -10vw; } } } @media (max-width: 1024px) { .LandingSection { .LeftSide { flex-basis: 50%; .Octopus { width: 40vw; height: 45vh; } } .RightSide { color: $primary_black; font-family: $primary_font; vertical-align: middle; flex-basis: 40%; margin-left: -10vw; .Title { font-size: 5rem; text-align: center; .Caption { font-size: 1rem; } } } } } @media (max-width: 575.98px) { .LandingSection { flex-direction: column; text-align: center; padding-top: 0; min-height: 55vh; .LeftSide { .Octopus { width: 50vw; height: 30vh; } } .RightSide { text-align: center; .Title { font-size: 10vw; .Caption { font-size: 3vw; text-align: center; } } } } } @media (max-width: 320px) { .LandingSection { min-height: 50vh; } }