:root {
    --font-size-multiplier: 1.2;
}

html {
    font-size: calc(16px * var(--font-size-multiplier));
}

h1 {
    color: darkcyan;
}

@media (max-width: 749px) {
    #colophon .container>div {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 750px) and (max-width: 1261px) {
    #colophom .container>div {
        grid-template-columns: repeat(2, 1fr);
    }

    #colophom .container>div>div:last-child {
        grid-column: span 2;
    }
}

@media (min-width: 1262px) {
    #colophom .container>div {
        grid-template-columns: repeat(3, 1fr);
    }
}

[x-cloak] {
    display: none !important;
}

/* анимация скрытого блока */
.slide-enter-active,
.slide-leave-active {
    transition: all 0.9s ease;
    max-height: 1000px;
    /* Достаточно большое значение */
    opacity: 1;
    overflow: hidden;
}

.slide-enter,
.slide-leave-to {
    max-height: 0;
    opacity: 0;
    transform: translateY(-20px);
}