.highlights .content-container {flex-direction: column;}

/*.highlights .media-container .image-container {width: 500px;display: flex;height: 500px;position: relative;align-items: center;}
*/
.highlights .media-container .image-container .heading-wrapper {
    bottom: 0;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 68%;
    transform: translateX(-50%);
    transition: top 0.3s ease;
    width: 100%;
}


/*.highlights .media-container .image-container .image-wrapper {height: 320px;width: 500px;min-width: 295px;overflow: hidden;border-radius: 25px;transition: height 0.3s ease;max-width: 100vw;}
*/
.highlights .media-container .image-container .image-wrapper img {/* width: 100%; *//* height: 100%; *//* object-fit: cover; */}

.highlights .media-container .image-container a { text-decoration: none; }

    .highlights .media-container .image-container a:focus .heading-wrapper,
    .highlights .media-container .image-container a:hover .heading-wrapper {
        top: 81%;
        transition: all 0.3s ease;
    }

    .highlights .media-container .image-container a:focus .image-wrapper,
    .highlights .media-container .image-container a:hover .image-wrapper { /* height: 490px; */
        aspect-ratio: 1 / 1;
        transition: all 0.3s ease;
    }

    .highlights .media-container .image-container a:focus-visible {
        border-radius: 25px;
        transition: all 0.3s ease;
    }

.highlights .media-container .image-container .heading-wrapper p {
    color: white;
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-shadow: -2px 4px 0px rgba(14, 66, 63, 0.73), 0px 7px 10px rgba(0, 0, 0, 0.38), 0px 24px 2px rgba(92, 85, 85, 0.04), 0px 34px 30px rgba(0, 0, 0, 0.1), -1px 0 rgba(14, 66, 63), 0 1px rgba(14, 66, 63), 1px 0 rgba(14, 66, 63), 0 -1px rgba(14, 66, 63);
}

.highlights .media-container .image-container a:focus .heading-wrapper p,
.highlights .media-container .image-container a:hover .heading-wrapper p {
    font-size: 2.5rem;
    text-shadow: -2px 4px 0px rgba(14, 66, 63, 0.73), 0px 7px 10px rgba(0, 0, 0, 0.38), 0px 24px 2px rgba(92, 85, 85, 0.04), 0px 34px 30px rgba(0, 0, 0, 0.1), -1px 0 rgba(14, 66, 63), 0 1px rgba(14, 66, 63), 1px 0 rgba(14, 66, 63), 0 -1px rgba(14, 66, 63);
    transition: all 0.3s ease;
}
