.experiences-container {
    --experience-div-width: 21rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 640px) {
    .experiences-container{
        --experience-div-width: 24rem;
    }
}
@media (min-width: 1020px) {
    /*.experiences-container{
        width: calc(1rem + 2 * var(--experience-div-width))!important;
        display: grid;
        grid-template-columns: auto auto;
    }

    !*  the last child of experiences-container,
        but only if there's odd number of child  *!
    .experiences-container > *:nth-last-child(1):nth-child(odd){
        grid-column: span 2;
        margin-left: auto;
        margin-right: auto;
    }*/
}




.experience-div {
    display: grid;
    grid-template-rows: auto auto;
    grid-gap: 1rem;
    width: var(--experience-div-width);

    background-color: var(--default-box-background-color);
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
}

.title-photo-and-details-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.experience-div .title-and-details-container{
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.experience-div .title-and-details-container .title{
    font-size: 1.3rem;
    line-height: 1.75rem;
}
.experience-div .title-and-details-container .detail{
    color: #9ca3af;
}

.noselect {
    /* Credit: https://stackoverflow.com/a/4407335/7069108 */

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.experience-div .more-details-btn{
    cursor: pointer;
    background-color: var(--default-box-button-color);
    border-radius: 0.5rem;
    text-align: center;
    padding: 0.2rem;

    filter: brightness(100%);
    transition: filter 350ms;
}
.experience-div .more-details-btn:hover{
    filter: brightness(115%);
}

.experience-carousels{
    height: min(13rem, 40vh);
}

.experience-detail-table {
    display: grid;
    gap: 0.2rem 1rem;
}
.cols-2-fit-content{
    grid-template-columns: repeat(2, fit-content(100%));
}