Custom Post Layout 1

<div class="lnHolder">
    <a class='oxy-aht-post-image' href='<?php the_permalink(); ?>'>
        <div class="lnThumb">
            <?php if (get_the_post_thumbnail_url()): ?>
                <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="photo">
            <?php else: ?>
                <img src="https://linuxbangla.com/wp-content/uploads/2024/06/img-placeholder-illustration-1.svg" alt="photo">
            <?php endif; ?>
        </div>
    </a>
    <div class="lnTextContent">
        <div>
            <div class="newsTittleName">
                <a class='oxy-post-title' href='<?php the_permalink(); ?>'>
                    <h3 class="h3"><?php the_title(); ?></h3>
                </a>
                <!-- Fetch and display the post date -->
                <p class="date"><?php echo get_the_date('jS F Y'); ?></p>
            </div>
            <div class="post_excrapt">
                <?php
                    // Strip tags and get the excerpt or content
                    $string = wp_strip_all_tags(get_the_excerpt(), false);
                    if (!$string) {
                        $string = wp_strip_all_tags(get_the_content(), false);
                    }

                    // Define the desired width for the excerpt
                    $your_desired_width = 120;

                    // Truncate the string to the desired width
                    if (strlen($string) > $your_desired_width) {
                        $string = wordwrap($string, $your_desired_width);
                        $string = substr($string, 0, strpos($string, "\n"));
                        $string .= '.';
                    }

                    // Output the processed string with paragraphs
                    echo wpautop($string);
                ?>
            </div>
        </div>
        <!-- Link to view the full article -->
        <a class="read_more" href="<?php the_permalink(); ?>">View this article</a>
    </div>
</div>

/* Container for news and events posts */
.news_and_event .oxy-posts {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
    column-gap: 10px;
}

/* Individual post container */
.lnHolder {
    display: flex;
    flex-direction: column;
    min-width: 270px;
    background-color: #f1f6fc;
}

/* Link wrapping the post image */
.oxy-aht-post-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
}

/* Thumbnail container */
.lnThumb {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Thumbnail image */
.lnThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text content container */
.lnTextContent {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 26px 20px 29px 15px;
}

/* Title and date container */
.newsTittleName {
    font-size: 16px;
    color: #323236;
    line-height: 1.1;
}

/* Title styles */
.newsTittleName h3, .h3 {
    font-size: 18px;
    font-weight: 400;
    color: #323236;
    font-family: 'Poppins';
    transition: 0.3s ease;
}

/* Title hover effect */
.newsTittleName h3:hover {
    color: #0b93e2;
}

/* Title styles for larger screens */
@media only screen and (min-width: 992px) {
    .newsTittleName h3, .h3 {
        font-size: 20px;
    }
}

/* Date styles */
.news_and_event .date {
    color: #323236;
    text-decoration: none;
    margin: 0;
    margin-top: 12px;
}

/* Link styles inside text content */
.lnTextContent a {
    font-size: 16px;
    color: #0b93e2;
}

/* Read more link styles */
.news_and_event .read_more {
    text-decoration: underline;
    transition: 0.3s ease;
}

/* Read more link hover effect */
.news_and_event a.read_more:hover {
    color: #031941;
}

/* Post excerpt styles */
.news_and_event .post_excrapt p {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 25px;
    margin-top: 30px;
    font-family: 'Poppins';
}

/* Styles for screens 576px and up */
@media only screen and (min-width: 576px) {
    .lnWraper {
        column-gap: 20px;
    }
    .lnHolder {
        min-width: 350px;
    }
}

/* Styles for screens 992px and up */
@media only screen and (min-width: 992px) {
    .lnWraper {
        overflow-x: unset;
        column-gap: 0px;
    }
    .lnHolder {
        width: 31%;
        min-width: none;
    }
}