.page-grid-body {
    display: grid;
    gap: 0 1rem;
    grid:
        "header side" auto
        "inside side" auto
        "content side" auto
        "footer side" auto
        / auto 16rem;
    margin: 0 auto;
    max-width: 57rem;
    padding: 1rem 1rem 9rem 1rem;
    position: relative;
}

.page-grid-header {
    grid-area: header;
}

.page-grid-inside {
    grid-area: inside;
}

.page-grid-content {
    grid-area: content;
}

.page-grid-footer {
    grid-area: footer;
}

.page-grid-side {
    grid-area: side;
    margin-top: 1.25rem;
    position: fixed;
    right: calc(50% - 28.5rem);
    top: 0;
    width: 16rem;
}

@media screen and (max-width: 57rem) {
    .page-grid-body {
        gap: 0 1rem;
        grid:
            "header" auto
            "inside" auto
            "content" auto
            "side" auto
            "footer" auto
            / auto;
        max-width: 40rem;
    }

    .page-grid-side {
        margin: 0 auto;
        position: static;
        right: unset;
    }
}

.page-grid-ios {
    bottom: -26.25rem;
    left: 1rem;
    position: fixed;
    transform: translate(0, 0) rotate(0);
    transition: transform 500ms ease-in-out;
}

.page-grid-ios:hover {
    transform: translate(2rem, -24rem) rotate(15deg);
}

.page-grid-ios > :first-child {
    bottom: 0;
    left: 0;
    position: absolute;
    transform: translateY(6rem);
    transition: transform 500ms;
}

.page-grid-ios > .ios__show-up {
    transform: translateY(0);
}

.page-grid-ios > .ios__scroll-down {
    transform: translateY(-6rem);
}

.page-grid-ios > .ios__scroll-up {
    transform: translateY(2rem);
}

/*
.page-grid-ios {
    display: none;
}

@media screen and (min-width: 74rem) {
    .page-grid-body {
        display: grid;
        gap: 0 1rem;
        grid:
            "ios header side" auto
            "ios inside side" auto
            "ios content side" auto
            "ios footer side" auto
            / 16rem auto 16rem;
        margin: 0 auto;
        max-width: 74rem;
        padding: 1rem;
        position: relative;
    }

    .page-grid-side {
        right: calc(50% - 37rem);
    }

    .page-grid-ios {
        display: block;
        grid-area: ios;
        left: calc(50% - 37rem);
        margin-top: 1.25rem;
        position: fixed;
        top: 0;
        width: 16rem;
    }
}
*/