.photo-grid {
    margin-top: var(--mob-top-margin);
    margin-left: .25rem;
    margin-right: .25rem;
    display: grid;
    row-gap: .25rem;
    column-gap: .25rem;
    margin-bottom: var(--mob-bot-margin);
}

.decorated-link {
    margin-top: 2rem;
    font-size:1.25rem;
    color: var(--clr-accent);
}

.decorated-link:hover {
    color: var(--clr-cerulean);
}

.photo-wrapper {
    width: auto;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.photo {
    width: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: ease-in;
}

@media only screen and (min-width: 40em) {
    .photo-grid {
        margin-top: var(--desk-top-margin);
        margin-left: 0;
        margin-right: 0;
        display: grid;
        column-gap: .25rem;
        row-gap: .25rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        margin-bottom: var(--desk-bot-margin);
    }

    .photo {
        width: 100%;
    }

    .photo-wrapper:nth-of-type(3n + 1) {
        grid-column: span 2;
        grid-row: span 2;
    }
}