.mast-background {
    position: relative;
    height: 550px;
    z-index: 1;
    overflow: hidden;
}

/* Background image */
    .mast-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../images/Graduates-Background-image.png");
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -2;
    }

/* Gradient overlay */
    .mast-background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        background-image: url("../images/Campus-tony-rand.png");
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -1;
        opacity: 1; /* initial dim */
        transition: opacity 1.5s ease-in-out;
    }

    .mast-background:hover::after {
        opacity: 0; /* removes dim overlay on hover */
    }
 
@media (min-width: 600px) and (max-width: 1024px) {
    .mast-background {
        height: 300px;
    }
}
/* Move blocks further left and shrink more on extra small screens */
@media (max-width: 600px) {
    .mast-background {
        height: 200px;
    }
}