.about-container {
    padding-top: 5em;
    background-color: #FFE3D4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
}

.about-text {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    justify-self: end;
    width: 60%
}

.about-fish h1 {
    font-size: 4em;
    font-weight: 400;
}

.about-text p {
    font-size: 1rem;
}

.about-text h1 {
    font-weight: 400;
}


.about-fish {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    justify-self: start;
    width: 10vw;
    padding-left: 20em;
}

.about-seaweed {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    justify-self: center;
    padding-left: 6em;
}

.small-fish {
    width: 25vw;
    height: auto;
    justify-self: end;
    padding-bottom: 20em;
}

.about-seaweed img {
    width: 25vw;
    padding-bottom: 7em;
}

@media screen and (max-width: 822px) {
    .about-container {
        padding-top: 5em;
        background-color: #FFE3D4;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        justify-content: space-between;
    }
    
    .about-text {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        justify-self: center;
        width: 70vw;
    }
    
    .about-fish h1 {
        font-size: 4em;
        font-weight: 400;
    }
    
    .about-text p {
        font-size: .7rem;
    }
    
    .about-text h1 {
        font-weight: 400;
    }
    
    
    .about-fish {
        display: none;
        grid-row: 0 / 0;
        grid-column: 0 / 0;
        justify-self: center;
    }
    
    .about-seaweed {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        justify-self: center;
    }
    
    .small-fish {
        width: 25vw;
        height: auto;
        justify-self: end;
        padding-bottom: 0em;
        
    }
    
    .about-seaweed img {
        width: 60vw;
        padding-right: 6em;
    }

}
    
@media screen and (max-width: 508px) {
    .about-container {
        padding-top: 5em;
        background-color: #FFE3D4;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        justify-content: space-between;
    }
    
    .about-text {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        justify-self: center;
        width: 70vw;
    }
    
    .about-fish h1 {
        font-size: 4em;
        font-weight: 400;
    }
    
    .about-text p {
        font-size: .7rem;
    }
    
    .about-text h1 {
        font-weight: 400;
    }
    
    
    .about-fish {
        display: none;
        grid-row: 0 / 0;
        grid-column: 0 / 0;
        justify-self: center;
    }
    
    .about-seaweed {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        justify-self: center;
        padding-top: 3em;
        padding-right: 0em;
        padding-left: 6em;
    }
    
    .small-fish {
        width: 25vw;
        height: auto;
        justify-self: end;
        padding-bottom: 0em;
    }
    
    .about-seaweed img {
        width: 60vw;
        padding-right: 6em;
    }
}