.section {
  position: relative;

  &--landing {
    width: 100vw;
    height: 100vh;

    h1 {
      @media (max-width: 700px) {
        font-size: 40px;
      }
    }

    .img-div {
      width: 100vw;
      height: 100vh;
      overflow: hidden;

      position: absolute;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .div-txt-landing {
      z-index: 3;
      position: absolute;
      color: var(--white);
      bottom: 0;
      @media (max-width: 700px) {
        width: 100%;
        padding-right: 20px; 
        padding-left: 20px; 
        padding-bottom: 50px; 
      }

      p {
        color: var(--white);
        width: 17.2vw;
        text-shadow: 1px 1px 4px #000000;

        @media (max-width: 1550px) {
          width: 30vw;
        }

        @media (max-width: 1100px) {
          width: 50vw;
        }

        @media (max-width: 700px) {
          width: 100%;
        
        }
      }
    }
  }


  &--twoImg {

    @media (max-width: 1000px) {
      flex-direction: column;
    }

    .vertical-txt {
      @media (max-width: 1000px) {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        text-orientation: mixed;

        position: relative;
        min-height: auto;
        padding: 0;
        padding-bottom: 30px,
      }
    }


    .txt-div {
      @media (max-width: 1550px) {
        padding-right: 80px;
      }

      @media (max-width: 1000px) {
        width: 100%;
        padding-bottom: 50px;
        padding-top: 0px;
        padding-right: 0;
      }

      .paragraf {
        width: 17vw;

        @media (max-width: 1500px) {
          width: 25vw;
        }

        @media (max-width: 1000px) {
          width: auto;
        }
      }
    }

    .one-img {
      width: 36.6vw;
      height: auto;
      max-height: 456px;

      @media (max-width: 1000px) {
        width: 70%;
        height: auto;
        max-height: 456px;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .two-img {
      width: 19.27vw;
      height: auto;
      margin-left: -100px;
      z-index: 20;


      @media (max-width: 1000px) {
        width: 50%;
        height: auto;
        margin-left: 0px;
        padding-top: 0;
        margin-top: -50px;
        align-self: flex-end;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

  }



  &--oneImg {
    @media (max-width: 1000px) {
      flex-direction: column-reverse;
      padding-bottom: 0;
    }

    .vertical-txt {
      @media (max-width: 1000px) {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        text-orientation: mixed;
        position: relative;
        min-height: auto;
        padding: 0;
        padding-bottom: 30px,
      }
    }


    .txt-div {
      position: relative;


      @media (max-width: 1000px) {
        width: 100%;
        padding-bottom: 50px;
        padding-top: 0px;

      }

      .paragraf {
        width: 17vw;

        @media (max-width: 1500px) {
          width: 25vw;
        }

        @media (max-width: 1000px) {
          width: auto;
        }
      }
    }

    .one-img {
      width: 55.5vw;
      height: auto;


      @media (max-width: 1000px) {
        width: 100%;
        height: auto;
        max-height: 456px;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }


  }
}