.animation-content{
    display: flex;
    flex-direction: column;
    height: 500px;
    width: 90%;
    align-self: center;
    margin: 0 auto 2rem;
}
.clean{
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%), url(../images/web-simple.jpg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.intentional{
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%), url(../images/web-intention.webp);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.functional{
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%), url(../images/web-functionl.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.example-bg{
    flex: 1;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.example-bg h3{
    font-family: 'Futura-Book',sans-serif;
    font-size: 3rem;
}
@media(min-width: 768px){
    .animation-content{
    background-size: cover;
    height: 100%;
    width: 100%;
    flex-direction: row;
    }
    .clean{
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%), url(../images/webdesign1.webp);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.intentional{
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%), url(../images/webdesign1.webp);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
.functional{
    background:linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%), url(../images/webdesign1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}
    .clean:hover{
        background: linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%),url(../images/web-simple.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: transform 1s ease;
    }
    .intentional:hover{
        background: linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%),url(../images/web-intention.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: transform 1s ease;
    }
    .functional:hover{
        background: linear-gradient(90deg,rgba(0, 0, 0, 0.5)0%,rgba(0, 0, 0, 0.5)100%),url(../images/web-functionl.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: transform 1s ease; 
    }
    .example-bg:hover{
        transform: scale(1.05);
        transition: transform 1s ease;
    }
}