#gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 0 var(--page-margin);
}

#gallery .tile {
    padding: 1em;
    aspect-ratio: 4/3;
    max-width: 400px;
    --darkness: 30%;
    box-sizing: border-box;
    overflow: hidden;
    transition-delay: 0.3s;
}

#gallery .tile.connect      { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-nextbike-5798288-(connect).jpg"); background-size: contain;}
#gallery .tile.love         { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-agung-pandit-wiguna-1128318-(love).jpg"); background-size: contain;}
#gallery .tile.experience   { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-daniel-frank-2248713-(experience).jpg"); background-size: contain;}
#gallery .tile.explore      { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-daniel-frank-1068596-(explore).jpg"); background-size: contain;}
#gallery .tile.strive       { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-andrea-piacquadio-2828962-(strive).jpg"); background-size: contain;}
#gallery .tile.achieve      { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-pixabay-161172-(achieve).jpg"); background-size: contain;}
#gallery .tile.thrill       { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-pixabay-71104-(thrill).jpg"); background-size: contain;}
#gallery .tile.compete      { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-pixabay-248547-(compete).jpg"); background-size: contain;}
#gallery .tile.overcome     { background-image: linear-gradient(rgba(0,0,0,var(--darkness)), rgba(0,0,0,var(--darkness))), url("../images/pexels-urs-van-osch-8058076-(overcome).jpg"); background-size: contain; 
    display: none;
}

#gallery .tile h3 {
    color: white;
    font-family: arial;
    font-size: 2.3vw;
    text-align: center;

    position: relative;
    top: 50%;
    transform: translateY(-100%);
    
    transition-property: top, --darkness;
    transition-timing-function: linear;
    transition-duration: 0.2s;
    cursor: default;
    user-select: none;
}

#gallery .tile:hover, #gallery .tile:focus-within {
    --darkness: 50%;
}

#gallery .tile:hover h3, #gallery .tile:focus-within h3 {
    /* top: 20%; */
    top: 1.1em;
}

#gallery .tile p {
    position: relative;
    color: white;
    font-size: 1vw;
    opacity: 0;
    /* bottom: -75%; */
    top: 10em;
    /* text-align: center; */

    transition-property: top, opacity;
    transition-timing-function: linear;
    transition-duration: 0.3s;
}

#gallery .tile:hover p, #gallery .tile:focus-within p {
    opacity: 1;
    /* top: calc(-50% + 6em); */
    top: calc(-50% + 6vw);
}

#gallery .tile .learn-more-button {
    display: inline-block;
    padding-top: 0rem;
    padding-bottom: 0.1rem;
    margin-top: 0.1rem;
}



main section {
    margin-top: 4rem;
}

main section:nth-of-type(1) {
    margin-top: 0;
}

main section img {
    max-width: 300px;
    width: 25vw;
    margin: 0 1em 0.5em 1em;
}

main section:nth-of-type(odd) {
    clear: right;
}

main section:nth-of-type(odd) img {
    float: left;
    margin-left: 0;
    margin-bottom: 3rem;
}

main section:nth-of-type(even) {
    clear: left;
}

main section:nth-of-type(even) img {
    float: right;
    margin-right: 0;
}