.about {
}

.about img {
    width: 100%;
    height: 100%;
    position: relative;
}

.about-text {
    padding: 0 30px;
    width: 100%;
}

/* filter: blur(8px); */

.animate-blur {
    animation: animateblur 3s
}

@keyframes animateblur  {
    from {
        filter: blur(8px);
        left: -250px;
    }
    to {
        filter: blur(0px);
        left: 0;
    }
}


@media (min-width: 450px) { 
    .about {
        display: flex;
    }

    .about img {
        width: 40vw;
        height: calc(100vh - 45px - 120px);
        object-fit: cover;
        object-position: 11% 0;
    }

    .about-text {
        width: 60vw;
        padding: 0 30px 0 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .about p {
        font-size: 16px;
    }

    .animate-blur {
        animation: animateblur 1s
    }

    @keyframes animateblur  {
        from {
            filter: blur(8px);
            width: 0;
        }
        to {
            filter: blur(0px);
            width: 40vw;
    
        }
    }
}