.experience {
    position: relative;
    width: 42vh;
    height: 20vh;
    padding: 0 2rem;

    .portrait & {
        width: 80vw;
    }

    &.experience--current {
        padding-left: 1rem;

        .place { left: 1rem; }
    }

    .date {
        margin-bottom: 1rem;
        font-weight: 700;
        line-height: 1;
        color: @colorRedBrown;

        @media (prefers-color-scheme: dark) {
            color: @colorHoverDark;
        }
    }

    .title {
        min-height: 12rem;
        padding-bottom: 2rem;
        font-weight: 900;
        font-size : @30px;
        line-height: 1.25;
        color: lighten(@colorGreyDark, 10%);

        @media (prefers-color-scheme: dark) {
            color: @colorWhite;
        }
    }

    .place {
        position: absolute;
        left: 2rem;
        bottom: 0;
        font-size: @15px;
        line-height: 1;

        @media (prefers-color-scheme: dark) {
            color: @colorGreyLightMedium;
        }
    }
    
    .location {
        position: absolute;
        right: 2rem;
        bottom: 0;
        font-size: @15px;
        line-height: 1;
        
        @media (prefers-color-scheme: dark) {
            color: @colorGreyLightMedium;
        }
    }
}