.experience { &__item { display: block; @include avoid-break; &:not(:first-child) { padding-top: 1.5rem; } } &__header, &__subheader { display: block; width: 100%; height: 2.4rem; } &__job { position: relative; transition: transform 0.2s cubic-bezier($cubic); &:hover { transform: translateX(0.5rem); } } &__company, &__position { text-align: left; width: 70%; float: left; } &__company { color: $color-dark; } &__position { text-transform: uppercase; font-size: 1.3rem; color: $color-dark; } &__date, &__place { float: right; text-align: right; width: 30%; color: $color-secondary; } &__date { font-weight: 400; } &__place { &::before { font-family: 'Material Icons'; color: $color-icon-background; font-size: 1.4rem; content: 'place'; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; } } &__bullet { list-style-position: inside; } &__badges { display: block; text-align: right; margin-top: 0.5rem; margin-bottom: 0.5rem; } &__badge { font-size: 0.9rem; font-weight: 400; display: inline-block; background-color: $color-icon-background; color: $color-icon-primary; border-radius: 1rem; padding: 0.1rem 0.6rem; } }