/*.background-split{
background: linear-gradient(180deg, rgb(255, 255, 255) 43%, rgb(234, 176, 0) 43%);

}
*/
 .page-content {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 1rem;
}
 @media (max-width: 600px) {
     .page-content {
         flex: 2 2 calc(50% - 50%);
    }
    .page-content{
        flex-direction:column;
    }
    
}
 @media (max-width: 992px) {
     .page-content {
         display:flex;
         flex-direction:column;
         align-items: normal;
    }
    
}
 @media (max-width: 768px) {
     .page-content {
         flex-wrap: wrap;
        flex-direction:row;
        padding:0;

    }
}
.item-card::after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     z-index: 1;
     bottom: 0;
     background: linear-gradient(2deg, #211f1f 19%, rgba(33, 31, 31, 0.592) 37%, rgba(72, 171, 224, 0) 52%);
}
 
 
 .item-card {
     position: relative;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
     padding: 1rem;
     width: 100%;
     text-align: left;
     color: #f5f5f5;
     background-color: #f5f5f5;
}
 @media (min-width: 992px) {
     .item-card {
         height: 500px;
         flex: 1 1 calc(100% - 2rem);
    }
}
 .item-card:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 110%;
     background-size: cover;
     background-position: 0 0;
     transition: transform 1050ms cubic-bezier(0.19, 1, 0.22, 1);
     pointer-events: none;
}
 .item-card:after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 200%;
     pointer-events: none;
     background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100% );
     transform: translateY(-50%);
     transition: transform calc(var(--d) * 2) var(--e);
}
 .item-card:nth-child(1):before {
     background-image: url(https://www.umsl.edu/home-page-2024/files/images/vc-student-life.webp);
}
 .item-card:nth-child(2):before {
     background-image: url(https://www.umsl.edu/home-page-2024/files/images/vc-athletics.webp);
}
 .item-card:nth-child(3):before {
     background-image: url(https://www.umsl.edu/home-page-2024/files/images/vc-alumni.webp);
}
 .item-card:nth-child(4):before {
     background-image: url(https://www.umsl.edu/home-page-2024/files/images/vc-alumni.webp);
}
 .content {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     padding: 1rem;
     transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
     z-index: 2;
}
 @media (hover: hover) and (min-width: 600px) {
     .item-card:after {
         transform: translateY(0);
    }
     .content {
         transform: translateY(calc(100% - 6.5rem));
    }
     .content > *:not(.title) {
         opacity: 0;
         transform: translateY(1rem);
         transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);
    }
     .item-card:hover, .item-card:focus-within {
         align-items: bottom;
    }
    .item-card:hover:before, .item-card:focus-within:before {
         transform: translateY(-4%);
    }
    .item-card:hover:after, .item-card:focus-within:after {
         transform: translateY(-50%);
    }
     .item-card:hover .content, .item-card:focus-within .content {
         transform: translateY(0);
    }
     .item-card:hover .content > *:not(.title), .item-card:focus-within .content > *:not(.title) {
         opacity: 1;
         transform: translateY(0);
         transition-delay: 87.5ms;
    }
     .item-card:focus-within:before, .item-card:focus-within:after, .item-card:focus-within .content, .item-card:focus-within .content > *:not(.title) {
         transition-duration: 0s;
    }
}

 .flex-container {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     width:100%;
  
}
 .content p {
     font-family: "Roboto", Arial, Sans-serif;
     color: #fff;
}
 .title {
     font-family: "Oswald", Arial, Sans-serif;
     color: #fff;
     margin-bottom: 10px;
     border-bottom:3px solid #ba0c2f;
     
}
 .title::after {
     position: absolute;
     border-bottom: 4px solid #cd0027;
     margin: 0px 20px;
     z-index: 2;
     transition: 0.5s;
     transform: translateY(0px);
     bottom: 50px;
}