#contact-display {
    color: #fff;
    background: #333;
    padding: 2rem;
    position: relative;
    height: 75%;
    width: 100%;
    display: block;
}

#contact-display:before {
    content: '';
    background: #a09e9e;
    background: url('../img/CollegeAbout-unsplash.jpg') no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

.contact-display-container {
    display: flexbox;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

.contact-display-content h1 {
    color: #152d6d;
    z-index: 1;
}

@media(max-width: 500px) {
    .courses {
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }
}

@media(min-width: 501px) and (max-width: 768px) {
    .courses {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 769px) and (max-width: 1024px) {
    .courses {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width: 1025px) and (max-width: 1200px) {
    .courses {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(min-width: 1201px) and (max-width: 1600px) {
    .courses {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media(min-width: 1601px) and (max-width: 3200px) {
    .courses {
        grid-template-columns: repeat(6, 1fr);
    }
}