.preview {

    margin-top: 1.6rem;

    height: 100%
}

.preview img {

    width: 100%;

    border-radius: 0.4rem
}

.preview .preview-panel {

    margin-top: 1.6rem;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    overflow: hidden;

    border-radius: 0.8rem;

    --tw-bg-opacity: 1;

    background-color: rgb(var(--color-white) / var(--tw-bg-opacity));

    --tw-text-opacity: 1;

    color: rgb(var(--color-blue) / var(--tw-text-opacity))
}

.preview .preview-panel-group, .preview .preview-panel-group div {

    display: flex;

    flex-direction: row;

    align-items: stretch
}

.preview .preview-panel-group:nth-child(2) {

    flex-grow: 1;

    justify-content: space-between;

    border-left-width: 1px;

    border-right-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(var(--color-ivory) / var(--tw-border-opacity))
}

.preview .preview-panel-group a,
.preview .preview-panel-group span,
.preview .preview-panel-group input,
.preview .preview-panel-group div {

    display: flex;

    align-items: center;

    justify-content: center
}

.preview .preview-panel-group a {

    padding: 1.2rem
}

.preview .preview-panel-group > div {

    align-items: stretch
}

.preview .preview-panel-group a:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(var(--color-ivory) / var(--tw-bg-opacity))
}

.preview .preview-panel-group input {

    margin-bottom: -0.2rem;

    width: 2.4rem;

    align-self: center;

    border-bottom-width: 2px;

    --tw-border-opacity: 1;

    border-color: rgb(var(--color-ivory) / var(--tw-border-opacity));

    text-align: center;

    --tw-text-opacity: 1;

    color: rgb(var(--color-blue) / var(--tw-text-opacity));

    outline: 2px solid transparent;

    outline-offset: 2px
}

@media (min-width: 640px) {

    .container {

        max-width: 640px
    }

    .\!container {

        max-width: 640px !important
    }
}

@media (min-width: 768px) {

    .container {

        max-width: 768px
    }

    .\!container {

        max-width: 768px !important
    }

    .preview {

        margin-top: 4.0rem
    }
}

@media (min-width: 1024px) {

    .container {

        max-width: 1024px
    }

    .\!container {

        max-width: 1024px !important
    }

    .gap-grid {

        gap: 2.4rem
    }
}

@media (min-width: 1280px) {

    .container {

        max-width: 1280px
    }

    .\!container {

        max-width: 1280px !important
    }
}

@media (min-width: 1536px) {

    .container {

        max-width: 1536px
    }

    .\!container {

        max-width: 1536px !important
    }
}

@media (min-width: 1800px) {

    .container {

        max-width: 1800px
    }

    .\!container {

        max-width: 1800px !important
    }
}