.wp-block-post-featured-image { /*for image loading effect*/
    background: var(--wp--preset--color--black);
}

main.wp-post {
    margin-top: 50px;
}

.post-header {
    padding-top: 40px;
    padding-bottom: var(--wp--preset--spacing--90);
}

.wp-block-post-date {
    font-family: var(--font-family-roboto-condensed);
    font-weight: var(--font-weight-semibold);
    font-size: var(--wp--preset--font-size--medium);
}

.wp-block-post-title {
    font-size: 50px;
    margin: var(--wp--preset--spacing--40) 0;
}

.written-by {
    margin: var(--wp--preset--spacing--40) 0;
    font-family: var(--font-family-roboto);
    font-weight: var(--font-weight-medium);
    font-size: var(--wp--preset--font-size--medium);
}

.written-by a {
    font-family: var(--font-family-roboto);
    font-weight: var(--font-weight-medium);
    font-size: var(--wp--preset--font-size--medium);
    text-decoration: none;
}

.social-share {
    margin: 0;
    display: flex;
}

.social-share .icon-wrapper {
    margin-bottom: 5px;
}

.social-share br,
.social-share p {
    display: none;
}

.single .main a:not(.wp-block-button__link, .wp-element-button, .yarpp-thumbnail):hover {
    color: var(--yellow-color);
}

.single .wp-block-post-author-name {
    pointer-events: none;
}

/*
*   Mobile
*/
@media screen and (max-width: 768px) {
    .wp-post .wp-block-post-featured-image {
        aspect-ratio: 5/6;
    }
    .wp-post .wp-block-post-featured-image img {
        height: 100%;
        object-position: center;
    }

    .social-share.floating {
        display: none;
    }
    .social-share {
        margin-bottom: 90px;
    }
}

/*
*   Desktop
*/
@media screen and (min-width: 768px) {
    .post-header {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .wp-block-post-title {
        font-size: 82px;
    }

    .wp-post .wp-block-post-featured-image {
        max-height: 90vh;
        overflow: hidden;
    }

    .social-share.floating {
        flex-direction: column;
        align-items: end;
        position: sticky;
        top: calc(100vh - 200px);
        margin-bottom: 80px;
        opacity: 0;
        height: 0;
        pointer-events: none;
        padding-right: var(--wp--style--root--padding-right);
        transition: opacity 0.1s ease-in;
    }

    .social-share .icon-wrapper {
        margin-bottom: var(--wp--preset--spacing--15);
    }

    .social-share.floating .icon-wrapper {
        background: var(--wp--preset--color--black);
        border-radius: 100%;
        overflow: hidden;
    }

    .scrolled-half-viewport .social-share.floating {
        opacity: 1;
        z-index: 50;
        height: auto;
    }

    .scrolled-half-viewport .social-share .icon-wrapper {
        pointer-events: auto;
    }
}