/* ============ Cover Image Style ============= */

/* Styling for the Responsive Cover Image */
#cover-img {
    /* Width and Height */
    width: 80%;
    height: 400px;

    /* Makes sure the Cropping Affects Feet but not Heads */
    object-fit: cover;
    object-position: 50% 50%;

    /* Border */
    border-radius: 15px;

    /* Colour */
    background-color: #F2F2F2;

    /* Shadow Effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

    /* Smooth Transform and Shadow Transition */
    transition: transform 3.5s, box-shadow 3.5s;
}

/* Hover Effect for Cover Image */
#cover-img:hover {
    /* Slightly lifts Card on Hover */
    transform: translateY(-5px) ;
    box-shadow: 0 8px 16px rgba(242, 184, 114, 0.7);

    /* Hover Colour */
    background-color: #F2E5BD;
}
 
/* Tablet Mode */
@media (max-width: 900px) {
    #cover-img {
        object-position: 70% 50%;
    }
}

/* Smartphone Mode */
@media (max-width: 500px) {
    #cover-img {
        width: 90%;

        /* Object Position */
        object-fit: cover;
        object-position: 60% 50%;

        /* Increases Vertical Margin */
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* No Image Below 400px */
@media (max-width: 400px) {
    #cover-img {
        display: none;
    }
}