.title {
text-align: center;
font-size: 40px;
}
.cases {
display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
.case-container {
    position: relative;
    height: 200px;
    width: min-content;
    min-width: 300px;
    margin-block: 20px;


}

.case-description {
display: none;
position: relative;
border: 1px solid red;
box-shadow: 0px 0px 5px 4px red;
height: 100%;

padding-left: 100px;
padding-right: 10px;
}
.case-description-text {
margin-block: 5px;
margin-left: 10px;
width: 100%;
height: 100%;
font-size: 20px;
}

.case-link {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-decoration: none;
}

#brand-reputation .case-round, #brand-reputation .case-description {
border: 1px solid #70ad47;
box-shadow: 0px 0px 5px 2px #70ad47;
}

#predictive .case-round, #predictive .case-description {
border: 1px solid #00b0f0;
box-shadow: 0px 0px 5px 2px #00b0f0;
}
#segmentation .case-round, #segmentation .case-description {
border: 1px solid #8FAADC;
box-shadow: 0px 0px 5px 2px #8FAADC;
}
#bi .case-round, #bi .case-description {
border: 1px solid #ED7D31;
box-shadow: 0px 0px 5px 2px #ED7D31;
}

.case-round {
background: linear-gradient(#3B3B40, 60%, black);
z-index: 1;
border-radius: 50%;

height: 200px;
width: 200px;
transition: transform 0.3s;
}
.case-round:hover {
transform: scale(1.05);
box-shadow: 0px 0px 5px 4px red;
}

.case-name {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
font-size: 24px;
}


@media only screen and (min-width: 800px) {

.title {
    font-size: 56px;
}

.case-description {
    display: block;
}

.case-link {
    left: 0;
    transform: translateX(0%) translateY(-50%);
}
.case-container {
    display: inline-block;
}

.case-container {
    position: relative;
    height: 200px;
    margin: 20px 10vw 20px 10vw;
    width: 70%;
    padding: 50px 0 50px 100px;
}
}