.preview-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.preview-modal.--open .preview-modal__header,
.preview-modal.--open .preview-modal__iframe {

    transform: translateY(0px) scale(1);
    transition: transform 350ms ease-out;
}

.preview-modal__header {
    display: flex;
    align-items: center;

    padding: 2px 30px;

    height: 59px;
    border-bottom: solid 1px #E7E7E7;

    background-color: #FFFFFF;  

    transform: translateY(-120px) scale(1.2);
    transition: transform 350ms ease-in;
}

.preview-modal__header__title {
    flex: 1;
}

.preview-modal__header__title h3 {
    color: #000000;
}

.preview-modal__header__close {

}

.preview-modal__header__close button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;

    font-family: var(--blog-grid-masonry-list-excerpt-font-font-family);
    font-style: var(--blog-grid-masonry-list-excerpt-font-font-style);
    font-weight: var(--blog-grid-masonry-list-excerpt-font-font-weight);
    line-height: var(--blog-grid-masonry-list-excerpt-font-line-height);
    letter-spacing: var(--blog-grid-masonry-list-excerpt-font-letter-spacing);
    text-transform: var(--blog-grid-masonry-list-excerpt-font-text-transform);
    text-decoration: underline;
    color: var(--headingSmallColor);
}

.preview-modal__iframe {
    height: calc(100% - 60px);
    width: 100%;

    background-color: #FFFFFF;

    transform: translateY(110vh) scale(0.8);
    transition: transform 350ms ease-in;
}

.preview-modal__iframe iframe {
    width: 100%;
    height: 100%;

    border: 0;
}