.lp-reading-table
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 56px;
    align-items: center;
}

.lp-reading-shot
{
    height: 400px;
}

.lp-reading-shot img
{
    width: 1180px;
    left: -214px;
    top: -52px;
}

.lp-catalog
{
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin-top: 112px;
}

.lp-catalog-visual
{
    position: relative;
    padding: 48px 0 0 118px;
}

.lp-catalog-shot
{
    position: relative;
}

.lp-catalog-scan
{
    position: absolute;
    left: 12%;
    top: 0;
    bottom: 0;
    width: 13%;
    overflow: hidden;
    border-left: 2px solid var(--brand-spark);
    border-right: 2px solid var(--brand-spark);
    background: rgba(var(--brand-spark-rgb), .10);
}

.lp-catalog-scan em,
.lp-page-1 em
{
    position: absolute;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(var(--brand-spark-rgb), 0), rgba(var(--brand-spark-rgb), .45), rgba(var(--brand-spark-rgb), 0));
    animation: lp-scan 3.2s linear infinite;
}

.lp-pages
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 150px;
    height: 196px;
}

.lp-page
{
    position: absolute;
    width: 132px;
    height: 176px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--brand-line);
    box-shadow: 0 18px 36px -20px rgba(var(--brand-deep-rgb), .45);
}

.lp-page-3
{
    left: 18px;
    top: 20px;
    transform: rotate(8deg);
}

.lp-page-2
{
    left: 9px;
    top: 10px;
    transform: rotate(4deg);
}

.lp-page-1
{
    left: 0;
    top: 0;
    display: grid;
    gap: 9px;
    align-content: start;
    overflow: hidden;
    padding: 16px 14px;
}

.lp-page-1 i
{
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
}

.lp-page-1 i:nth-child(odd)
{
    width: 72%;
}

.lp-page-1 i:nth-child(3n)
{
    width: 40%;
    background: var(--brand-line-soft);
}

@keyframes lp-scan
{
    from
    {
        top: -56px;
    }

    to
    {
        top: 100%;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .lp-catalog-scan em,
    .lp-page-1 em
    {
        animation: none;
    }
}

@media (max-width: 900px)
{
    .lp-reading-table,
    .lp-catalog
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .lp-catalog
    {
        margin-top: 64px;
    }

    .lp-catalog-visual
    {
        padding: 32px 0 0 40px;
    }

    .lp-pages
    {
        transform: scale(.7);
        transform-origin: 0 0;
    }
}