Improving TweetFeed legibility

App.scss

$font-size-base: 1.2rem;
$line-height-base: 1.2;

gistfile1.txt

<template>
    <div :class="hasImageClass"
         v-if="tweet"
         class="tweet-slideshow-item position-absolute w-100 p-3">
        <div class="card h-100 rounded-5">
            <div class="card-body">
                <img :src="tweet.avatar"
                     alt="Avatar"
                     class="rounded-circle float-left mr-3">
                <h5 class="card-title mb-0">@{{tweet.username}}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{tweet.date | formatDate}}</h6>
                <p :class="textClass" class="card-text">{{tweet.text}}</p>
            </div>
            <div class="h-100 tweet-media"
                 :style="imageStyle"></div>
        </div>
    </div>
</template>

<script lang="ts" src="./TweetFeedSlideShowItem.ts">
</script>

<style lang="scss" src="./TweetFeedSlideShowItem.scss">
</style>