Post

<div class="post__image image-wrapper">
	<img src="/sites/default/files/styles/component_480x270_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=iJQRoelB" width="480" height="270" alt="" loading="lazy" typeof="foaf:Image">
</div>
<h3 class="heading--5">Post Title</h3>

{{ attach_library('fitch_master/post') }}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
<div class="post__image image-wrapper">
    {% if content.field_link.0['#url'] is not empty %}
    <a
        href="{{ content.field_link.0['#url'] }}"
        {% if content.field_link.0['#options'].attributes.target is not empty %}target="{{ content.field_link.0['#options'].attributes.target }}"{% endif %}
        {% if content.field_link.0['#options'].attributes.title is not empty %}title="{{ content.field_link.0['#options'].attributes.title }}"{% endif %}
    >
    {% endif %}
    {{ content.field_image }}
    {% if content.field_link.0['#url'] is not empty %}
    </a>
    {% endif %}    
</div>
<h3 class="heading--5">
    {% if content.field_link.0['#url'] is not empty %}
    <a
        href="{{ content.field_link.0['#url'] }}"
        {% if content.field_link.0['#options'].attributes.target is not empty %}target="{{ content.field_link.0['#options'].attributes.target }}"{% endif %}
        {% if content.field_link.0['#options'].attributes.title is not empty %}title="{{ content.field_link.0['#options'].attributes.title }}"{% endif %}
    >
    {% endif %}
    {{ content.field_title }}    
    {% if content.field_link.0['#url'] is not empty %}
    </a>
    {% endif %}
</h3>
{% endblock paragraph %}

.post {
    &__image {
        margin-bottom: var(--spacing-1);
        transition: all 360ms ease;

        &:hover,
        &:focus {
            transform: scale(1.03);
            box-shadow: 0 0 18px 0 var(--shadow);
        }
    }
    &__teaser {
        margin-bottom: 8.4rem;
    }
    &__wrapper {
        align-items: center;
        display: flex;
    }
    &__profile-image {
        width: 4.8rem;

        img {
            margin: 0;
            transition: border 360ms ease;
            border: 2px solid var(--border-color);
            border-radius: 9rem;
        }
    }
    &__details {
        width: calc(100% - 4.8rem);
        padding-left: 1.2rem;
        font-size: var(--font-size-2);

        .heading--1 {
            margin-bottom: 0;
        }

        a {
            font-weight: var(--bold);
            color: var(--link-color);
        }
    }
    &__view-more {
        max-width: 24rem;
        margin: 0 1.2rem;
        transition: all 360ms ease;
        background: var(--post-view-more-background);
        border: 0.1rem solid var(--border-color);
        border-radius: 0.6rem;
        font-size: 14px;
        font-weight: 300;
        text-align: center;

        &:hover,
        &:focus {
            transform: scale(1.03);
            box-shadow: 0 0 18px 0 var(--shadow);
        }
        
        a {
            height: 100%;
            width: 100%;
            transition: none;
            font-weight: var(--bold);
            font-size: 24px;
            flex-flow: column nowrap;
            justify-content: center;
            display: flex;
            
            &:hover,
            &:focus {
                text-decoration: none;

                &:after {
                    transform: rotate(-45deg);
                }
            }

            &:before {
                content: "View More";
                margin-bottom: 1.8rem;
                font-size: var(--font-size-2);
                font-weight: 300;
                display: block;
            }
            &:after {
                content: "\f057";
                transition: all 360ms ease;                
                margin-top: 2.4rem;
                font-family: FontAwesomeR;
                font-size: 2.4rem;
                font-weight: 400;
                display: block;
            }
        }
    }
}