@media screen and (max-width: 1920px) {
    .sports-image-container {
        width: 28vw;
    }
}

@media screen and (min-width: 1920px) {
    .sports-image-container {
        width: 25vw;
    }
}

/* Styles for sports */
.page-content {
    margin-top: 8vh;
}

.image-with-title h2 {
    padding: 0.1em 1em;
    font-size: 3vw;
    margin-top: 20px;
    color: rgb(128, 128, 128);
    /* background-color: #122331; */
}

#sports-content{
     /*margin-bottom: 8vh;*/
    color: black;
}

.sports-image-container {
    overflow: hidden;
    background-color: black;
}

.sports {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* text-align: center; */
    flex-wrap: wrap;
}

.sports-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    margin: 38px 0;
}

.sports-link:hover img {
    opacity: 0.75;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.sports-link:hover h2 {
    /* font-family: 'Cabin', sans-serif; */
    background-color: black;
    transition: all 0.3s ease;
}

.sports-link:hover .paragraph-one-image {
    /* transform: translateY(-150px); */
    transform: translateY(-10vh);
    transition: all 0.3s ease;
    opacity: 1;
}

.sports-link:hover .sport-title {
    color: black;
}

.sports-link:hover .knowMore {
    transform: translateX(200px);
    transition: all 0.3s ease;
    opacity: 1;
}

.sports-link h2 {
    overflow: hidden;
    text-align: left;
    position: relative;
    align-items: center;
    /* padding: 5px 0; */
    color: white;
    height: 70px;

    background-color: black;
}

/* .sports section{
    width: 30%;
    height: auto;
    position: relative;
} */

.sports-image-container img{
    width: 100%;
    transition: all 0.3s ease;
}

.text-on-image {
    position: absolute;
    bottom: 0;
    color: white;
    display: flex;
    flex-direction: column;
    /* opacity: 0; */

}

.paragraph-one-image {
    /* transform: translateY(150px); */
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif;
    padding: 0px 20px;
    opacity: 0;
    width: 28vw;
}

.sport-title {
    opacity: 1;
    font-size: 1.8em;
    transition: all 0.5s ease;
}

.knowMore {
    position: absolute;
    left: -200px;
    bottom: -5px;
    z-index: 10;
    color: white;
    height: 70px;
    font-size: 1.65em;
    /* background-color: #1A1A1A; */
    transition: all 0.3s ease;
    opacity: 0;
}