body {
    grid-template-rows: auto auto 1fr auto auto;
}
article>section {
}
section section {
    width: 100%;
}
.imageHolder {
    background-image: url("../images/woman9.webp");
    background-size: cover;
    background-position: 100% 0;
    animation: floatFromLeft 1s ease-out;
    animation-fill-mode: forwards;
}
.textHolder {
    justify-content: flex-end;
    animation: floatFromRight 1s ease-out;
    animation-fill-mode: forwards;
}
.textHolder p {
    width: 80%;
    background-color: var(--home);
    padding: 0 5rem;
}
@keyframes floatFromRight {
    0% {
        opacity: 0;
        transform: translatex(100%);
    }
    100% {
        opacity: 100;
        transform: translatex(0);    
    }
}
@keyframes floatFromLeft {
    0% {
        opacity: 0;
        transform: translatex(-100%);
    }
    100% {
        opacity: 100;
        transform: translatex(0);    
    }
}
h1 {
    margin: 1rem 0;
    color: var(--home);
    display: none;
}

@media only screen and (max-width: 1100px) {
    article>section {
        width: 90%;
    }
}
@media only screen and (max-width: 1000px) {
    .textHolder p {
        width: initial;
        font-size: 7vw;
    }
}
@media only screen and (max-width: 690px) {
    .hero {
        grid-template-rows: 1fr 2fr;
    }
}
@media only screen and (max-width: 500px) {
    .hero {
        flex-direction: column-reverse;
    }
    .imageHolder {
        width: 100%;
    }
    .textHolder p {
        font-size: 10vw;
    }
  }