@import "../../../utils"; @import "../../../style/fonts.module"; @import "../../../style/colors.module"; .VscodeSection { background-color: $primary_lightblue; background-image: url('#{$assetPath}/props/etoile_de_mer.svg'); background-repeat: no-repeat; background-position: 70% 1%; background-size: 10% 10%; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 100vh; padding: 2% 0 2% 0; .LeftSide { padding: 1% 1%; .VscodeImage { width: 50vw; height: 55vh; -webkit-box-shadow: -1px 1px 2px 3px $primary_very_lightblue; -moz-box-shadow: -1px 1px 2px 3px $primary_very_lightblue; box-shadow: -1px 1px 2px 3px $primary_very_lightblue; } } .RightSide { color: $primary_black; font-family: $primary_font; text-align: left; padding: 1% 3%; flex-basis: 30%; max-width: 60%; .Title { font-size: 2.7vw; line-height: 2.7vw; } .Caption { font-size: 1.3vw; line-height: 1.5vw; margin-top: 5%; color: white; } } } @media (max-width: 1024px) { .VscodeSection { min-height: 70vh; .LeftSide { .VscodeImage { margin-top: 2%; width: 50vw; height: 35vh; } } } } @media (max-width: 768px) { .VscodeSection { flex-direction: column; text-align: center; min-height: 60vh; background-position: 95% 0; .LeftSide { .VscodeImage { margin-top: 2%; width: 70vw; height: 40vh; } } .RightSide { padding-top: 5%; .Title { font-size: 5vw; line-height: 5vw; } .Caption { font-size: 2.7vw; line-height: 2.7vw; } } } } @media (max-width: 425px) { .VscodeSection { .LeftSide { .VscodeImage { margin-top: 2%; width: 70vw; height: 30vh; } } } } @media (max-width: 320px) { .VscodeSection { min-height: 50vh; .LeftSide { .VscodeImage { margin-top: 2%; width: 70vw; height: 20vh; } } } }