Styles for the provided mockup

style.css

/**
 *
 * Styles matching the provided website mockup.
 *
 * NOTES:
 * – We'll use WP's native custom properties wherever possible.
 * – The usage of `!important`, although a bad practice, is unavoidable in the situations it was used.
 */

/* Define custom properties where there's no equivalent in WordPress.  */
:root {
    --wp--preset--color--light-teal: #6facac;
    --wp--custom--border-radius--20: .8em;
}

/* Define underlines on links globally */
a:not(.wp-block-navigation-item__content) {
    text-decoration: underline !important;
}

a:not(.wp-block-navigation-item__content):hover {
    text-decoration: none !important;
}

/* Main Header */
header .wp-block-site-title a {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    text-indent: -9999px; /* move the text out of view */
    overflow: hidden;
    white-space: nowrap;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10s10-4.49 10-10S17.51 2 12 2M3.01 12c0-1.3.28-2.54.78-3.66l4.29 11.75c-3-1.46-5.07-4.53-5.07-8.09M12 20.99c-.88 0-1.73-.13-2.54-.37l2.7-7.84l2.76 7.57c.02.04.04.09.06.12c-.93.34-1.93.52-2.98.52m1.24-13.21c.54-.03 1.03-.09 1.03-.09c.48-.06.43-.77-.06-.74c0 0-1.46.11-2.4.11c-.88 0-2.37-.11-2.37-.11c-.48-.02-.54.72-.05.75c0 0 .46.06.94.09l1.4 3.84l-1.97 5.9l-3.27-9.75c.54-.02 1.03-.08 1.03-.08c.48-.06.43-.77-.06-.74c0 0-1.46.11-2.4.11c-.17 0-.37 0-.58-.01C6.1 4.62 8.86 3.01 12 3.01c2.34 0 4.47.89 6.07 2.36c-.04 0-.08-.01-.12-.01c-.88 0-1.51.77-1.51 1.6c0 .74.43 1.37.88 2.11c.34.6.74 1.37.74 2.48c0 .77-.3 1.66-.68 2.91l-.9 3zm6.65-.09a8.99 8.99 0 0 1-3.37 12.08l2.75-7.94c.51-1.28.68-2.31.68-3.22c0-.33-.02-.64-.06-.92'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    color: var(--wp--preset--color--primary);
    background-size: contain;
}

.wp-container-core-group-is-layout-1e90f300 {
    background: var(--wp--preset--color--light-teal) !important;
    padding-bottom: var(--wp--preset--spacing--50) !important;
}

.wp-container-core-group-is-layout-1e90f300 .wp-block-image.wp-block-image.size-full {
    margin-bottom: -100px;
}

/* Search Form */
form.wp-block-search input,
form.wp-block-search button {
    border-radius: 0 !important;
}

form.wp-block-search button {
    background-color: var(--wp--preset--color--vivid-red) !important;
}

form.wp-block-search .wp-block-search__label {
    display: none;
}

/* Navigation */
.blog ul.wp-block-navigation__container {
    background: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--30) !important;
}

[class*="wp-elements"] a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--light-teal) !important;
}

/* Article list */

/* We'll target only the blog page */
.blog main {
    margin-top: 0;
    padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

.blog main .wp-block-post-template li {
    text-align: center;
}

.blog main .wp-block-post-featured-image {
    margin-top: var(--wp--preset--spacing--60) !important;
}

.blog main .wp-block-post-featured-image img {
    border-radius: var(--wp--custom--border-radius--20);
}

.blog .wp-block-post-template.is-flex-container {
    gap: var(--wp--preset--spacing--50);
}

.blog .has-medium-font-size a {
    font-size: var(--wp--preset--font-size--small) !important;
}

/* Footer */
footer .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--source-serif-pro);
    font-style: normal;
    color: var(--wp--preset--color--vivid-red);
    text-decoration-thickness: 1px !important;  /* Redefining WordPress' underline thickness */
}

/* Responsive */
@media (max-width: 599px) {
    .wp-container-core-group-is-layout-1e90f300 .wp-block-image.wp-block-image.size-full {
        display: none;
    }

    form.wp-block-search {
        padding: 0 var(--wp--preset--spacing--50);
    }

    .blog main {
        padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
    }

    nav.wp-block-navigation.items-justified-right {
        padding-right: var(--wp--preset--spacing--50);
        margin-top: 0;
    }
}

@media (min-width: 600px) {
    .blog .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li {
        width: calc((100% - (2 * var(--wp--preset--spacing--50))) / 3);
    }
}