/* -------------- Pytorch demystified 4: Optimizing the CPU backend ---------------- */

/* sub-headings inside the x86 primer */
h5 {
    text-align: center;
    padding-top: 20px;
}

#pytorch-step-4,
#pytorch-step-4-dark {
    width: 75%;
}

.pytorch-perf {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pytorch-perf.pytorch-perf-large {
    width: 85%;
}

#pytorch-static-linking,
#pytorch-static-linking-dark {
    width: 55%;
}

#pytorch-dynamic-linking,
#pytorch-dynamic-linking-dark {
    width: 80%;
}

#pytorch-memleak-includes,
#pytorch-memleak-includes-dark {
    width: 70%;
}

#pytorch-memleak-calls,
#pytorch-memleak-calls-dark {
    width: 92%;
}

/* Phone setting again */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
    .pytorch-perf.pytorch-perf-large {
        width: 100%;
    }

    #pytorch-step-4,
    #pytorch-step-4-dark {
        width: 87%;
    }

    #pytorch-static-linking,
    #pytorch-static-linking-dark {
        width: 75%;
    }

    #pytorch-memleak-includes,
    #pytorch-memleak-includes-dark {
        width: 80%;
    }

    #pytorch-memleak-calls,
    #pytorch-memleak-calls-dark {
        width: 95%;
    }

    #pytorch-dynamic-linking,
    #pytorch-dynamic-linking-dark {
        width: 95%;
    }
}

/* Hover preview for perf images */
@media (hover: hover) {
    .pytorch-perf {
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: zoom-in;
    }

    .pytorch-perf:hover {
        transform: scale(1.03);
        z-index: 5;
        box-shadow: 4px 6px 16px var(--color-blog-shadow);
    }
}