#changeImageSection{
    visibility: hidden;
}
#changeImageInterface{
    grid-template-areas: 
    "Title" "Exit"
    "Info" "Info";

    grid-template-columns: 9fr 1fr;
    grid-template-rows: 1fr 9fr;
}

.imageOptions{
    height: 100%;
    width: 100%;
}

#changeImageOptionsSection{
    border-top: 5px black solid;
    grid-column: span 2;
    background-color: white;

    display: grid;

    grid-template-rows: repeat(2, 1fr);

    grid-gap: 50px;

    overflow: scroll;
}

.changeImageOptions{
    display: grid;

    grid-template-columns: 2fr 8fr 1fr;

    text-align: center;
}

#changeImageTitle{
    text-align: center;
}

@media screen and (max-width: 1000px) {
    #changeImageInterface{
        font-size: 0.8em;
    }

    .changeImageOptions{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr 1fr;

        grid-template-areas: 
        "Name"
        "Image"
        "Button";

        grid-gap: 0px;

        
    }

    .imageOptions{
        height: 250px;
        width: 250px;
        grid-area: Image;
        justify-self: center;
    }

    .changeImageEquip{
        width: 100%;
        grid-area: Button;
        justify-self: center;
    }

    .changeImageName{
        grid-area: Name;
        justify-self: center;
    }


    
}