@import "base.css";

section {
    display: grid;
    grid-gap: var(--vertical-16-pinch);
}

.appear {
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
}
  
.appear.inview {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
}

.case {
    grid-gap: var(--vertical-16);
}

.resume {
    display: grid;
    grid-gap: var(--vertical-110);
}

.project {
    display: grid;
    grid-gap: var(--vertical-68);
}

.resume > .name {
    display: grid;
    grid-template-rows: 50vh;
    align-items: end;
    margin-bottom: var(--vertical-42);
}

.project > .name {
    display: grid;
    margin-top: var(--vertical-110);
}

.resume .row {
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-gap: var(--horizontal-21);
}

.one-by-two {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap:var(--horizontal-21);
    align-items: center;
}

.border {
    border: 2px solid #f8f8ff;
}

.work-nav {
    display: grid;
    margin-top: var(--vertical-6);
    grid-gap: var(--vertical-16-pinch);
    font-size: var(--vertical-16-pinch);
    line-height: 1.75rem;
}

.work-nav a  {
    color: #444466;
}

/* Tablet */
@media screen and (max-width: 754px) {
    .resume .row {
        display: grid;
        grid-template-columns: none;
        grid-gap: 0;
    }

    .resume .role::before {
        content: "—";
    }
}

/* Mobile */
@media screen and (max-width: 610px) {
    h1 {
        font-size: var(--vertical-42-pinch);
        line-height: var(--vertical-68);
    }
    
    body {
        padding: var(--vertical-26) var(--horizontal-21);
    }

    .resume > .name {
        grid-template-rows: none;
        margin-bottom: var(--vertical-2);
    }

    .project > .name {
        margin-top: var(--vertical-2);
    }

    .one-by-two {
        display: block;
    }
}