#experience {
    background-color: var(--accent);
    color: var(--gold-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: calc(8vw + 4rem) 4vw 4vw 4vw;
}

    #experience .grid {
        background-color: rgba(180,140,80,0.1);
        border: 1px solid rgba(180,140,80,0.25);
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 2rem;
    }

        #experience .card {
            background: linear-gradient(90deg, transparent 50%, var(--accent) 50%) no-repeat center right / 201% 100%;
            padding: 4vw;
            position: relative;
            transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
        }

        @media (hover: hover) {
            #experience .card:hover {background-position: center left;}
        }

            #experience .card h3 {
                transition: all 0.25s cubic-bezier(0.75, 0, 0.25, 1);
            }

            #experience .card::before {
                color: var(--gold);
                font-family: 'Playfair', serif;
                font-weight: 100;
                font-size: 6rem;
                line-height: 1;
                opacity: 0.25;
                position: absolute;
                top: 4vw;
                right: 4vw;
            }

            #experience .card:nth-of-type(1)::before {content: '01';}
            #experience .card:nth-of-type(2)::before {content: '02';}
            #experience .card:nth-of-type(3)::before {content: '03';}
            #experience .card:nth-of-type(4)::before {content: '04';}

/* ----- MEDIA QUERIES ----- */

@media screen and (max-width: 768px) {
    #experience .grid {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 480px) {
    #experience {padding: calc(4rem + 4rem) 2rem 2rem 2rem;}

        #experience .card {padding: 2rem;}  
}