/*-------------------------------------------------->
<-----                 MOBILE                  ----->
<--------------------------------------------------*/

@media only screen and (min-width: 0rem) {

  .inner-hero {
    position: relative;
    display: flex;
    top: 0;
    width: 100%;
    height: 20rem;
    background-color: black;
    z-index: 3;
  }

  .inner-hero__header {
    margin: 10rem auto;
  }

  /*-------------------------------->
  <---         SECTION 1         --->
  <--------------------------------*/

  .inner-section1-container {
    position: relative;
    margin-inline: 1.75rem;
    margin-bottom: 4.5rem;
    min-height: 500px;
    background-color: white;
  }

  .inner-section1-content h2 {
    margin: 2.5rem auto 1.5rem auto;
    text-align: center;
  }

  .inner-section1-content p {
    justify-content: center;
    margin: 0.75rem auto;
    line-height: 150%;
    text-align: center;
  }
  
}

/*-------------------------------------------------->
<-----        MOBILE LANDSCAPE > 480px         ----->
<--------------------------------------------------*/

@media only screen and (min-width: 30rem) {
}

/*-------------------------------------------------->
<-----          SMALL TABLET > 600px           ----->
<--------------------------------------------------*/

@media only screen and (min-width: 37.5rem) {

  .inner-section1-container {
    margin-inline: 4rem;
  }

}

/*-------------------------------------------------->
<-----             TABLET > 768px              ----->
<--------------------------------------------------*/

@media only screen and (min-width: 48rem) {  
  
  .inner-section1-container {
    margin-inline: 12%;
  }

  .inner-section1-content h2 {
    margin: 2.5rem auto 1.5rem auto;
    text-align: left;
  }

  .inner-section1-content p {
    justify-content: center;
    line-height: 175%;
    margin: 0.75rem auto;
    text-align: left;
  }

}

/*-------------------------------------------------->
<-----          LARGE TABLET > 800px           ----->
<--------------------------------------------------*/

@media only screen and (min-width: 55rem) {
}

/*-------------------------------------------------->
<-----         SMALL DESKTOP > 1024px          ----->
<--------------------------------------------------*/

@media only screen and (min-width: 64rem) {
}

/*-------------------------------------------------->
<-----            DESKTOP > 1280px             ----->
<--------------------------------------------------*/

@media only screen and (min-width: 80rem) {
}

/*-------------------------------------------------->
<-----         LARGE DESKTOP > 1441px          ----->
<--------------------------------------------------*/

@media only screen and (min-width: 90rem) {
}