.main-container
{
    /*
        aspect-ratio for image may lead to fractions of a pixel height; causing overflow-y scrollbar to show.
        css has no floor() function
        scrolling is not required so just hide overflow
    */
    overflow: hidden;
}

.page-container
{
    grid-template: "treasure-image message" 1fr / auto 1fr;
}

.treasure-image
{
    grid-area: treasure-image;
    position: relative;
    aspect-ratio: 667 / 1000;
    height: 100%;
}

.treasure-image .image-container
{
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: 667 / 1000;
    height: 100%;
}

.treasure-image .image-container img
{
    min-height: 100%;
    max-height: 100%;
    max-width: 100%;
}

.treasure-image .image-container .shadow
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: -2px 0 4px 0 rgba(0,0,0,0.2) inset;
}

.message
{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
}

@media (max-aspect-ratio: 12 / 10)
{
    .treasure-image
    {
        opacity:0;
        visibility: hidden;
    }
    .page-container
    {
        grid-template: "treasure-image message" 1fr / 0 1fr;
    }
}