.landing-banner {
    background-position: 35%;
    height: 35vh;
    @media screen and (hover), 
    screen and (hover: none) and (min-width: 786px) {
        height: 45vh;
    }
}

.page-intro {
    margin-left: 0;
    margin-right: 0;
}

.photo-links-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-mobile-small);
    margin-bottom: var(--gap-mobile-small);
    @media screen and (hover) {
        gap: var(--gap-desktop-medium);
        margin-bottom: var(--gap-desktop-medium);
    }
    @media screen and (hover) and (min-width: 786px) {
        gap: var(--gap-desktop-small);
    }
}

.photo-links {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--gap-mobile-small);
    column-gap: var(--gap-mobile-small);
    justify-content: center;
    @media screen and (hover) and (max-width: 785px) {
        column-gap: var(--gap-desktop-small);
        row-gap: var(--gap-desktop-medium); 
    }
    @media screen and (hover) and (min-width: 786px) {
        display: grid;
        gap: var(--gap-desktop-small);
        grid-template-columns: repeat(5, 1fr);
    }    
}    

.photo-links p {
    font-size: 0.9rem;
    line-height: 1.1rem;
    margin-top: 0.5rem;
    max-width: 100%;
}

.photo-links.aqua a:hover, .photo-links.aqua > div:hover {
    outline: 1px solid var(--blue-text);
    box-shadow: 4px 4px 0 var(--blue-text);
}

.photo-links.earth a:hover, .photo-links.earth > div:hover {
    outline: 1px solid var(--green);
    box-shadow: 4px 4px 0 var(--green);
}

.photo-links div {
    cursor: pointer;
}

.photo-links .vertical-center-text {
    min-height: 2.5em;
    max-width: 100%;
    @media screen and (max-width: 786px) {
        align-items: start;
    }
}

.photo-links a, .photo-links > div {
    text-align: center;
    width: 25vmin;
    @media screen and (hover) and (max-width: 785px) {
        width: 10rem;
        height: 10rem;
    }    
    @media screen and (min-width: 786px) {
        width: unset;
    }
}

.photo-links.aqua > div:nth-last-child(2),
.photo-links.aqua > div:last-child {
    @media screen and (hover: none) and (max-width: 785px) {
        width: 40vmin;
    }
}

.photo-links a {
    @media screen and (hover) and (min-width: 786px) {
        width: unset;
    }
}

div.photo-link-img {
    background-size: cover;
    background-position: center;
    height: 35vmin;
    @media screen and (hover) and (max-width: 785px) {
        height: 10rem;
    }
    @media screen and (hover) and (min-width: 786px) {
        width: 100%;
        height: 8rem;
    }
}    

.photo-links.aqua {
    color: var(--blue-text);
}

.photo-links.earth {
    color: var(--green);
}

.photo-links.earth a:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
}

.photo-links.earth div:last-child {
    grid-column-start: 4;
    grid-column-end: 6;
}