@import url("style.css");

#work-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: center;
    margin: 0 10vw;
}

#work-section div h2 {
    letter-spacing: 0.1rem;
}

#work-item1 {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

#work-img1 {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    width: 90%;
    text-align: center;
}

#work-item2 {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
}

#work-img2 {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    width: 70%;
    text-align: center;
}


picture {
    text-align: center;
}

.work-slide {
    margin: 2vw;
    color: var(--secondary-color);
}


@media only screen and (max-width: 768px) {
    #work-section {
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        width: 100%;
    }

    #work-item1 {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        width: 100%;
    }

    #pic1 {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        width: 100%;
        text-align: center;
    }

    #work-item2 {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        width: 100%;
    }

    #pic2 {
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
        width: 100%;
        text-align: center;
    }

}

@media only screen and (max-width: 480px) {
    #work-section {
        grid-template-rows: 2fr 1fr 2fr 1fr;
        grid-template-columns: 1fr;
        width: 100%;
    }

    #work-item1 {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        width: 100%;
    }

    #pic1 {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        width: 100%;
        text-align: center;
    }

    #work-item2 {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        width: 100%;
    }

    #pic2 {
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
        width: 100%;
        text-align: center;
    }

}