@import "/styles/root.css";

/* ////////////////////////////////////////////////////////////LAYOUT */
.content.preview {
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    column-gap: var(--spacing2-root);
    row-gap: var(--spacing2-root);

    font-family: var(--font-family_main);
    font-size: var(--font-size_preview);
}


/* ////////////////////////////////////////////////////////////CONTENT */
.preview-background {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .8s;
    background-color: #ffffffc5;
}
.preview-bleed {
    height: 0;
    transition: height .8s;
}

.preview-container {
    cursor: pointer;
    position: relative;
    aspect-ratio: 1 / 1;
    transition: height .4s;
}
.preview-content {
    pointer-events: none;
    object-fit: contain;
    object-position: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: opacity .8s;
}
.preview-content.hidden {
    opacity: 0;
}
.image.preview-content {
}
.video.preview-content {

}
.text-container.preview-content {
    overflow: hidden;
    z-index: 1;
    padding-top: var(--spacing2-root);
    padding-bottom: var(--spacing4-root);
    background-color: white;
}
.text.description {

}
.text.author {
    color: var(--color-font_info);
}
/* ///////////////////////////////PDF */
.pdf {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .1em solid var(--color-font-main);
    color: inherit;
    text-decoration: inherit;
}
.pdf > p {
}