@media only screen and (max-width: 310px) and (min-width: 285px) {
    html {
        background-image: none;
        width: fit-content;
    }

    body {
        margin: 10px;
    }

    footer {
        height: 0px;
        display: none;
    }

    .gallery {
        gap: 17px;
    }

    .gallery a p {
        font-size: large;
    }

    .header,
    header {
        display: none;
    }
}

@media only screen and (max-height: 45vw) {
    html {
        background-image: none;
        width: fit-content;
    }

    body {
        margin: 1.2vw;
    }

    footer {
        height: 0px;
        display: none;
    }

    .header,
    header {
        display: none;
    }

    .gallery {
        display: flex;
        gap: 2vw;
    }

    .gallery a img {
        max-width: 40vw;
    }

    .gallery a p {
        font-size: 3vw;
        padding: 1vw;
    }
}