main h2{
    font-size: var(--font-size-subtitle);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.2rem;
    word-spacing: 0.25rem;
    margin-top: var(--space-xlarge);
    margin-bottom: var(--space-medium);
}

main h2:first-of-type{
    margin-top: var(--space-medium);
}

h1#about{
    margin-top: 0;
}

main .intro{
    margin-bottom: var(--space-large);
}

.resume-section{
    position: relative;
    margin-bottom: 0;
}

.resume-index{
    --main-alpha-value: 0.9;
    position: sticky;
    top: var(--header-height);
    background-color: rgba(var(--main-dark-color), 0.9);
    padding-inline: 4vw;
    margin-inline: -4vw;
    z-index: 2;
}

.resume-index ul{
    display: flex;
    justify-content: space-between;
    gap: var(--space-medium);
    padding-bottom: 1rem;
}

.resume-index .only-desktop{
    display: none;
}


.resume-grid{
    margin-bottom: var(--space-large);
}

.resume-grid h3{
    font-weight: bold;
    color: rgb(var(--main-accent-color));
}

.resume-grid > * {
    margin-bottom: var(--space-medium);
}

.resume-grid .role{
    width: clamp(185px, 20%, 250px);
    flex-shrink: 0;
}

main .separator{
    min-height: 0.5rem;
    border: 0;
    border-top: 0.5px solid rgb(var(--main-lighter-color));
    flex-grow: 1;
    width: clamp(15rem, 100%, 41rem);
    margin-inline: 0;
    margin-bottom: var(--space-medium);
}

.resume-grid-component{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-small);
}

.resume-grid-component > * {
  
}

.resume-grid p, .resume-grid a{
    
}

.resume-grid p.date{
    font-size: var(--font-size-caption);
    margin-top: 0.1rem;
}

.resume-grid p.place{
    font-size: var(--font-size-caption);
}

.resume-grid .info{
    font-size: var(--font-size-caption);
    max-width: 47ch;
    transform: translateY(0.2rem);
}

.resume-grid ul{   
    list-style: inside;
    max-width: 47ch;
}

.resume-grid li{
    margin-bottom: var(--space-xsmall);
    text-indent: -1.35em;
    padding-left: 0.8em;
}

.image-wrapper.resume{
    aspect-ratio: 4/5;
    width: clamp(10rem, 50%, 24rem);
    background-color: rgb(var(--main-lighter-color));
   
}

.image-wrapper.resume img{
  
}

.resume-link{
    display: flex;
    gap: var(--space-small);
    margin-top: var(--space-large);
    padding-bottom: var(--space-large);
}

.main-content .initial-hidden{
    margin-block: 0;
    padding-bottom: 0;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity var(--main-transition-time) var(--main-ease), height var(--main-transition-time) var(--main-ease), margin var(--main-transition-time) var(--main-ease);
}

.initial-hidden.visible{
    margin-block: var(--space-small);
    opacity: 1;
}

.main-content .intro-no-margin{
    margin-bottom: 0;
}

.read-more{
    font-size: var(--font-size-caption);
}


@media only screen and (min-width: 850px) {
    
    .resume-grid-component{
        flex-direction: row;
        gap: var(--space-large);
    }

    .resume-index{
        /* top:3.4rem; */
    }

    .resume-index .only-desktop{
        display: block;
    }

    .resume-index ul{
        justify-content: flex-start;
    }

    .resume-grid > * {
        margin-bottom: var(--space-medium);
    }

    .resume-grid .separator{
        margin-bottom: var(--space-medium);
    }
}