.architect-grid:hover .architect-title,
.architect-grid:focus .architect-title {
    opacity: 0;
    top: 40%;
}

.architect-grid:hover .architect-learn-more,
.architect-grid:focus .architect-learn-more {
    opacity: 1;
    top: 50%;
}

.architect-grid {
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    padding-top: 6em;
    padding-bottom: 6em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background-position: center;
    background-size: cover;
}

.architect-title {
    opacity: 1;
    top: 50%;
    padding: 1em;
    transition: opacity .6s ease, top .6s ease;
}

.architect-learn-more {
    opacity: 0;
    top: 60%;
    transition: opacity .6s ease, top .6s ease;
}

.architect-learn-more,
.architect-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}