@import '../scss/_color.scss';

.TimeDuration {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: $theme-color-white;
  padding: 10px;  
}

.TimeDuration-block {
  width: 100%;
  padding: 10px;  
}

.reveal {
  background-color: $primary-color;
}

.finalize {
  background-color: $primary-color-light;  
}
@import '../scss/_color.scss';
@import '../scss/_base.scss';

.TimeDuration {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 0.9em;  
  width: 100%;
  line-height: 0.5;
  margin-bottom: 1em;
  color: $dark-grey;

  @include desktop {
    flex-direction: row;
    align-items: center;
    max-width: $main-width;

    & > div {
      flex: 1;
    }
  }
}

.TimeDuration-block {
  margin-bottom: 0.5em;
  border-bottom: 1px solid $dark-grey;
  
  h3 {
    color: $primary-color-light;
  }

  p:nth-child(3) {
    text-align: right;
  }
}

.reveal {
  @include desktop {
    margin-right: 1em;
  }
}

.finalize {
  @include desktop {
    margin-left: 1em;
  }
}

Make the desktop/mobile view and make the view style consistency.
Make the desktop/mobile view and make the view style consistency.
