/* GSASP Modifications */
#experience .particle-column {
    opacity: 0;
}
#experience .articles article {
    transform: translateX(50px);
    opacity: 0;
}
/* === */

#experience .svg-container {
    width: 0px;
    height: 0px;
}

#experience .articles {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: var(--section__gap);
}

#experience .column {
    position: relative;
}

#experience .particle-column {
    position: sticky;
    top: 0;
    height: 100vh !important;
    display: grid;
    place-items: center;
}
#particle-logo {
    position: relative;
    pointer-events: none;
}
#particle-logo canvas {
    width: 250px;
    height: 250px;
}

#experience .article-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100vh;
    height: 100%;
}

.noise-trigger {
    position: relative;
    width: 100%;
    height: max(2rem, 15vh);
}

#experience .articles article p {
    max-width: 100%;
}

#experience .articles article .links {
    font-size: 14px;
}

@media screen and (max-width: 1000px) {
    #experience .articles {
        grid-template-columns: 275px minmax(0, 1fr);
    }
}
@media screen and (max-width: 750px) {
    #experience .articles {
        grid-template-columns: 0% 100%;
        column-gap: 0px;
    }
    #experience .articles article {
        padding: 24px 16px;
        background: rgba(20, 21, 21, .3); /* Similar background set on hero in gsap code */
        border-radius: 4px;
    }
    #experience .particle-column {
        z-index: -1;
        width: 100%;
        right: -25%;
        transform: translateX(25%);
    }
    #particle-logo canvas {
        width: 350px;
        height: 350px;
    }
}