Kalkuli/2018.2-Kalkuli_Front-End

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

.feature {
  margin: auto;
  height: 80rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  &__h1 {
    font-size: 4rem;
    margin-top: 6rem;
  }
  &__container {
    margin: 1.5rem 0;
    width: 100%;
    height: 85rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-evenly;
    &__element {
      padding: 2rem;
      text-align: center;
      height: 65%;
      width: 28rem;
      display: flex;
      flex-flow: column wrap;
      justify-content: space-evenly;
      align-items: center;
      background-image: linear-gradient(
        to right bottom,
        $color-light-blue,
        $color-dark-blue
      );
      border-radius: 2rem;
      box-shadow: 0 .5rem 1rem rgba($color-black, .4);
      &__border {
        background-color: $color-white;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 15rem;
        width: 15rem;
        border: 2px solid $color-light-blue;
        border-radius: 10rem;
        box-shadow: 0px 0px 1rem rgba($color-black, .2);
      }
      &__img {
        width: 10rem;
        height: 10rem;
      }
      &__p {
        color: $color-white;
        font-size: 2.8rem;
        font-weight: 500;
      }
    }
  }
}

@media (min-width:320px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .feature {
    width: 92%;
    height: 52rem;
    &__h1 {
      font-size: 1.65rem;
      margin-top: 3rem;
    }
    &__container {
      &__element {
        height: 20rem;
        width: 13rem;
        &__border {
          border: 1.4px solid $color-light-blue;
          height: 7rem;
          width: 7rem; 
        }
        &__img {
          width: 4rem;
          height: 4rem;
        }
        &__p {
          font-size: 1.1rem;
        }
      }
    }
  }
}
@media (min-width:480px) { 
  /* smartphones, Android phones, landscape iPhone */ 
  .feature {
    width: 80%;
    height: 67rem;
    &__h1 {
      margin-top: 4.4rem;
      font-size: 2rem;
    }
    &__container {
      &__element {
        height: 24rem;
        width: 17rem;
        &__border {
          border: 1.8px solid $color-light-blue;
          height: 9rem;
          width: 9rem; 
        }
        &__img {
          width: 5.2rem;
          height: 5.2rem;
        }
        &__p {
          font-size: 1.55rem;
        }
      }
    }
  }
}
@media (min-width:600px) {  
  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
  .feature {
    height: 80rem;
    width: 78%;
    &__h1 {
      font-size: 2.2rem;
    }
    &__container {
      &__element {
        height: 30rem;
        width: 21rem;
        &__border {
          border: 2px solid $color-light-blue;
          height: 11rem;
          width: 11rem; 
        }
        &__img {
          width: 7rem;
          height: 7rem;
        }
        &__p {
          font-size: 1.8rem;
        }
      }
    }
  }
}
@media (min-width:801px) { 
  /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  .feature {
    height: 86rem;
    width: 64%;
    &__h1 {
      font-size: 2.7rem;
    }
    &__container {
      &__element {
        height: 32rem;
        width: 22rem;
        &__border {
          height: 12rem;
          width: 12rem; 
        }
        &__img {
          width: 7.5rem;
          height: 7.5rem;
        }
        &__p {
          font-size: 2rem;
        }
      }
    }
  }
}
@media (min-width:1025px) { 
  /* big landscape tablets, laptops, and desktops */ 
  .feature {
    margin-top: 2.5rem;
    height: 55rem;
    width: 100%;
    margin-bottom: 2rem;
    &__h1 {
      font-size: 2.8rem;
    }
    &__container {
      &__element {
        height: 36rem;
        width: 22rem;
        &__border {
          height: 13rem;
          width: 13rem; 
        }
        &__img {
          width: 8rem;
          height: 8rem;
        }
        &__p {
          font-size: 2.2rem;
        }
      }
    }
  }
}
@media (min-width:1550px) { 
  /* hi-res laptops and desktops */ 
  .feature {
    height: 60rem;
    width: 90%;
    &__h1 {
      font-size: 3.1rem;
    }
    &__container {
      &__element {
        height: 39rem;
        width: 24rem;
        &__img {
          width: 8rem;
          height: 8rem;
        }
        &__p {
          font-size: 2.3rem;
        }
      }
    }
  }
}