nav.aqua .nav-link:nth-child(3):hover {
    background-color: var(--blue);
}

nav.aqua .nav-link:nth-child(3):hover h2 {
    color: var(--white);
    cursor: context-menu;
}

.flex-column {
    gap: var(--gap-mobile-small);
    @media screen and (hover) {
        gap: var(--gap-desktop-small);
    }
}

@media screen and (max-width: 785px) {
.hide-on-phones {
        display: none;        
    }
}

@media screen and (hover) and (max-width: 785px) {
    .col-3 img {
        width: 20rem;
    }
}

.col-3 {
    align-items: center;
    gap: var(--gap-mobile-large);

    @media screen and (hover) {
        gap: var(--gap-desktop-medium);
    }
    @media screen and (max-width: 785px) {

    }
    @media screen and (min-width: 786px) {
        align-items: baseline;
    }
    @media screen and (min-width: 786px) and (hover) {
        gap: var(--gap-desktop-small);
    }
    @media screen and (min-width: 786px) and (hover: none) {
        gap: var(--gap-mobile-small);
    }
}

@media screen and (min-width: 786px) {
    .col-3 {
        grid-template-areas: 
            "a1 a2 a3"
            "b1 b2 b2"
            "c1 c2 c3";
    }
    .col-3 div:first-child {
        grid-area: b1;
        align-self: start;
    }
    .col-3 div:nth-child(2) {
        grid-area: b2;
    }
}    

@media screen and (min-width: 786px) {
    figure {
        height: 11rem;
    }
    figure img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}