BottomSection.module.scss

@import "../../../utils";
@import "../../../style/fonts";
@import "../../../style/colors";

.BottomSection {
  background-image: url('#{$assetPath}/curves/courbe_4.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
  background-repeat: no-repeat;
  background-position: bottom, 105% 40%, -5% 55%;
  background-size: 100% 50%, 35% 35%, 40% 40%;
  min-height: 180vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  font-family: $primary_font;
  font-weight: $primary_font_weight;
  padding-top: 10%;
  position: relative;


  .MiddleBlock {
    padding: 2% 2%;
    background: $primary_beige;
    color: $primary_black;
    border-radius: 10px;
    max-width: 50vw;

    display: flex;
    flex-direction: column;
    text-align: left;


    .Title {
      font-size: 1.8vw;
    }

    .Caption {
      display: flex;
      flex-direction: row;

      .Comments {
        flex-basis: 80%;
        padding-right: 5%;

        .FirstComment {
          font-size: 1.2vw;
        }

        .SecondComment {
          font-size: 0.8vw;
        }

      }

      .ButtonContainer {
        flex-basis: 20%;
        position: center;
        padding-right: 10%;

        Button {
          margin-top: 20%;
          font-family: $primary_font;
          font-weight: $primary_font_weight;
          font-size: 0.9vw;
          width: 100%;
          height: 30%;

        }