.tile-container {
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(auto-fill, 500px);
    max-width: 1300px;
    padding: 80px 0 50px 0;
}

.tile {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.tile-title {
    font-size: 2em;
}

.tile-toplevel {
    padding: 20px 0 0 0;
}

.tile-sublevel {
    display: none;
}

.tile > .image-container > img {
    width: 100%;
    height: 300px;
    padding: 10px 0 20px 0;
    bottom: 0;
    margin-top: auto;
}

.tile > .image-container {
    position: relative;
}

.tile > .image-container > button {
    opacity: 1;
    height: 50px;
    width: 15%;
    position: absolute;
    bottom: 15%;
    right: 5%;
    background-color: white;
    color: black;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
}

@media only screen and (orientation: portrait) {

    .tile-container {
        grid-template-columns: 90%;

    }

}

@media only screen and (orientation: portrait) and (max-height: 1000px) {

    .tile-container {
        grid-template-columns: 100%;
    }

    .tile > .image-container > img {
        padding-bottom: 0;
    }

    .tile > .image-container > button {
        bottom: 10%;
        opacity: 1;
    }

}