Kalkuli/2018.2-Kalkuli_Front-End

@import '../../assets/sass/main.scss';

.about{
    background-color: $color-white;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 3.2rem;
    margin-bottom: 3rem;
    &__text {
      display: flex;
      flex-flow: column wrap;
      align-items: flex-start;
      justify-content: space-around;
      color: $color-black;
      text-align: justify;
    }
    &__img{
        background-image: url('../../assets/img/aboutgrafico.png');
        background-repeat: no-repeat;
        background-position: left;
    }
}


@media (min-width:320px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .about {
    padding: 1rem;
    &__text {
      width: 15rem;
      height: 13rem;
      font-size: 1rem;
    }
    &__img {
      width: 14rem;
      height: 14rem;
      background-size: 14rem;
    }
  } 
}
@media (min-width:480px) { 
  /* smartphones, Android phones, landscape iPhone */ 
  .about {
    &__text {
      width: 22rem;
      height: 16rem;
      font-size: 1.3em;
    }
    &__img {
      width: 20rem;
      height: 20rem;
      background-size: 20rem;
    }
  }
}
@media (min-width:600px) { 
  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
  .about {
    &__text {
      width: 25rem;
      height: 21rem;
      font-size: 1.6em;
    }
    &__img {
      width: 25rem;
      height: 25rem;
      background-size: 25rem;
    }
  }
}
@media (min-width:801px) { 
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .about {
    &__text {
      width: 35rem;
      height: 22rem;
      font-size: 1.9em;
    }
    &__img {
      width: 30rem;
      height: 30rem;
      background-size: 30rem;
    }
  }
}
@media (min-width:1025px) { 
  /* big landscape tablets, laptops, and desktops */ 
  .about {
    &__text {
      width: 55rem;
      height: 19rem;
      font-size: 2.2em;
    }
    &__img {
      width: 30rem;
      height: 30rem;
      background-size: 30rem;
    }
  }
}
@media (min-width:1281px) { 
  /* hi-res laptops and desktops */ 
  .about {
    &__text {
      width: 70rem;
      height: 23rem;
      font-size: 2.5em;
    }
    &__img {
      width: 38rem;
      height: 38rem;
      background-size: 38rem;
    }
  }
}
@media (min-width:1550px) { 
  .about {
    justify-content: center;
    padding: 3.5rem;
    &__text {
      margin-left: 5rem;
      width: 72rem;
      height: 23rem;
      font-size: 2.5em;
    }
    &__img {
      margin-right: 5rem;
      width: 38rem;
      height: 38rem;
      background-size: 38rem;
    }
  }
}