:root{
    --h1-font-size: 3rem;
    --h2-font-size: 2rem;
    --li-font-size: 1.8rem;

    --box-padding: 1.5rem;
    --box-padding-small: 0.75rem;
    --box-ul-margin: 2rem;
    --box-ul-li-margin-top: 1rem;

    --grid-column-span: 1/3;
    --grid-gap: 5rem;
}

.exp-box-padding{
    padding: var(--box-padding);
}

/* .exp-box-ul-margin-left{
    margin-left: var(--box-ul-margin);
} */

.exp-box-ul-width{
    width: min(75%,85rem);
    margin: 0 auto;
}

.grid-column-span-three{
    grid-column: 1/3;
}

/* HTML elements */

div.exp-box-container{
    display: grid;
    justify-content: center;
    gap: var(--grid-gap) 0;
    margin: var(--grid-gap) 0;
}

div.exp-box{
    background-color: var(--main-border-color);
    max-width: 75vw;
    border-radius: var(--border-radius-box);
    border: var(--border-box);
    box-shadow: var(--box-shadow);
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

h1.exp-box-employer{
    font-size: var(--h1-font-size);
    text-align: center;
}

h2.exp-box-position, h2.exp-box-date{
    font-size: var(--h2-font-size);
    font-weight: normal;
    /* text-align: center; */
    font-weight: bold;
}

h2.exp-box-date{
    text-align: right;
}

.exp-box-img img{
    width: var(--small-image-width);
    height: var(--small-image-height);
    display:block;
    margin: 0 auto;
}

/* ul.exp-box-desc{
    list-style-type: 
} */

ul.exp-box-desc li{
    font-size: var(--li-font-size);
    /* text-align: center; */
}

ul.exp-box-desc li:nth-child(n+2){
    margin-top: var(--box-ul-li-margin-top);
}

@media (max-width: 600px) {

    h2.exp-box-position, h2.exp-box-date{
        grid-column: 1/3;
        text-align:center;
    }

    h2.exp-box-position{
        padding: var(--box-padding-small) var(--box-padding-small) 0 var(--box-padding-small);
    }

    h2.exp-box-date {
        padding: 0 var(--box-padding-small) 0 var(--box-padding-small);
    }
}