.activity-guides {
    justify-content: space-around;
}

.activity-guide {
    overflow: hidden;
    position: relative;
    width: 312px; /* TODO */
    height: 400px; /* TODO */
    border-radius: 8px;
    box-shadow: 0 0 10px 1px black;
}

.activity-guide img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 300ms all linear;
}

.activity-guide .overlay {
    position: absolute;
    width: 100%;
    bottom: -97px; /* TODO */
    padding: 20px 0; /* TODO */
    background: rgba(7,137,68,1.0);
    color: white;
    transition: 300ms all linear;
}

.activity-guides .light-green .overlay {
	background: #76b333;	
}

.activity-guides .purple .overlay {
	background: #77004c;	
}

.activity-guides .pink .overlay {
	background: rgba(185,32,140,1.0);	
}

.activity-guides .blue .overlay {
	background: rgba(0,83,149,1.0);	
}


.activity-guide .overlay .title {
    display: block;
    font-size: 25px;
    text-align: center;
}

.activity-guide .overlay .tagline {
    display: block;
    text-align: center;
}

.activity-guide:hover img {
    top: -25px; /* TODO */
    margin-bottom: 40px;
}

.activity-guide:hover .overlay {
    bottom: 0;
}