LandingSection.module.scss

@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;
  }
}