.hero__content {
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;

    figure {
        img {
            border-radius: 20px;
        }
    }
}

.blog__intro {
    padding: 24px;
}

.blog__intro form .wp-block-search__inside-wrapper {
    border-radius: 64px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    border-color: var(--wp--preset--color--dark-green);
}

.blog__intro form .wp-block-search__input {
    border-radius: 64px;
    background-color: transparent;
}

.blog__intro form .wp-block-search__button {
    background-color: transparent;
    padding: 8px;
    margin: 0;
}

.blog__intro form .wp-block-search__button svg {
    fill: var(--wp--preset--color--dark-green);
    font-size: 32px;
    height: 32px;
}

.blog__tags {
    margin-top: 48px;
    height: 280px;
    overflow-y: scroll;
}

.blog__tags::-webkit-scrollbar-track {
    background: var(--wp--preset--color--light-green);
    border-radius: 20px;
}

.blog__tags::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--black-text);
    cursor: pointer;
}

.blog__categories,
.blog__tags {
    display: flex;
    gap: 8px;
    list-style: none;
    padding-left: 0;
    padding-top: 16px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.blog__categories {
    padding-bottom: 12px;
}

.blog__categories ul {
    display: flex;
    list-style: none;
    padding-left: 0;
    gap: 8px;
}

.blog__categories li a,
.blog__categories p a,
.blog__tags li a {
    text-decoration: none;
    color: var(--wp--preset--color--black-text);
    font-size: 14px;
}

.blog__categories p a {
    display: flex;
    justify-content: center;
    width: 110px;
}

.blog__tags li a {
    color: var(--wp--preset--color--white-text);
}

.blog__categories li,
.blog__categories p,
.blog__tags li  {
    padding: 12px 16px;
    border-radius: 64px;
    border: 1px solid #BEBEBE;
}

.blog__categories li.current-cat {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.blog__tags li.current-cat {
    background-color: var(--wp--preset--color--white-text);
}

.blog__tags li.current-cat a {
    color: var(--wp--preset--color--dark-green);
}

.blog__categories li.current-cat a {
    color: var(--wp--preset--color--white-text);
    font-weight: 700;
}

.blog__posts {
    padding: 24px;
}

.blog__posts__headline {
    padding-bottom: 32px;

    figure {
        display: flex;

        img {
            align-items: center;
        }
    }
}

.blog__post  {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.blog__post li {
    width: 100%;
    text-decoration: none;
    background-color: var(--wp--preset--color--white-text);
    display: flex;
    flex-direction: column;
    transform-origin: center;
    transition: all .4s ease-in-out;
    border-radius: 20px;

    &:hover {
        transform: scale(1.03);
    }
}

.blog__post li .wp-block-post-featured-image {
    width: 100%;
    border-radius: 16px;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;

}

.blog__post li .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.blog__post li .wp-block-post-title,
.blog__post li .taxonomy-category{
    padding-left: 24px;
    padding-right: 24px;
}

.blog__post li .wp-block-post-title {
    flex: 1;
}

.blog__post li .wp-block-post-title a {
    color: var(--wp--preset--color--black-text);
}

.blog__post li .btn {
    margin: 24px;
    margin-top: 12px;
    color: white;
    background-color: var(--wp--preset--color--primary);
    padding: 12px 36px;
    border-radius: 64px;
    border: 1px solid var(--wp--preset--color--primary);
    transition: all 0.4s ease-in-out;
    font-weight: 400;
}

.blog__post li .wp-block-post-title {
    font-size: var(--wp--preset--font-size--h-5);
    font-weight: 400;
    font-family: var(--wp--preset--font-family--secondary);
    color: var(--wp--preset--color--black-text);
}

.blog__post li .taxonomy-category  {
    display: flex;
    gap: 8px;
}

.blog__post li .taxonomy-category .wp-block-post-terms__separator{
    display: none;
}

.blog__post li .taxonomy-category a {
    font-size: 12px;
    font-weight: 500;
    background-color: #EEF1FF;
    color: #00397F;
    padding: 4px 6px;
    border-radius: 24px;
    margin-right: 12px;
    text-decoration: none;
}


.blog__post li .taxonomy-category a.grey,
.search-result__loop li .taxonomy-category a.grey {
    color: #A3A2A2;
    background-color: #F3F3F3;
}

.blog__post li .taxonomy-category a.blue,
.search-result__loop li .taxonomy-category a.blue {
    color: #469DE5;
    background-color: #EEFEFF;
}

.blog__post li .taxonomy-category a.orange,
.search-result__loop li .taxonomy-category a.orange {
    color: #EB6C05;
    background-color: #FFEFE5;
}

.blog__post li .taxonomy-category a.green,
.search-result__loop li .taxonomy-category a.green {
    color: #2A9588;
    background-color: #EEFEFF;
}

.blog__post li .taxonomy-category a.brown,
.search-result__loop li .taxonomy-category a.brown {
    color: #8F4C15;
    background-color: #FFEFE5;
}

.blog__post li .taxonomy-category a.purple,
.search-result__loop li .taxonomy-category a.purple {
    color: #BB46E5;
    background-color: #FFE5FD;
}


@media only screen and (min-width: 768px) {

    .hero__content {
        flex-direction: row;
        gap: 64px;
        align-items: center;
        justify-content: space-between;
    }

    .hero__right {
        figure {
            width: 40vw;
    
            img {
                width: 100%;
                border-radius: 20px;
                aspect-ratio: 16/9;
                object-fit: cover;
            }
        }
    }

	.blog__post {
		justify-content: space-between;
        gap: 32px;
    }

    .blog__post li {
		width: 47%;
    }

    .blog__post .taxonomy-category {
        font-size: 14px;
	}

}

@media only screen and (min-width: 1200px) {

    .hero__right {
        figure {
            width: 50vw;
        }
    }

    .blog__intro,
    .blog__posts {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .blog__intro-nav {
        display: flex;
        justify-content: space-between;

        form {
            margin-left: 0 !important;
        }

        .blog__categories {
            padding-top: 0;
            margin-right: 0 !important;

            li,p {
                transition: all .4s ease-in-out;
            }

            li:hover,
            p:hover {
                background-color: var(--wp--preset--color--primary);
                color: var(--wp--preset--color--white-text);
            }
        }
    }

    .blog__intro form .wp-block-search__inside-wrapper {
        width: 320px;
    }

    .blog__posts__headline {
        padding-bottom: 0;
    }

    .blog__post {
        justify-content: space-between;
        padding-top: 40px;
    }

	.blog__post li {
		padding-bottom: 32px;
		width: 31%;
        margin-bottom: 3vw;
    }

    .blog__post li	.btn {
		margin-bottom: 0;
	}

    .blog__post li .btn:hover {
        background-color: var(--wp--preset--color--primary) !important;
    } 

    .blog__post li .wp-block-post-title, .blog__post li .taxonomy-category {
        padding-left: 32px;
        padding-right: 32px;
    }

    .blog__post li .wp-block-post-featured-image {
        margin-bottom: 16px !important;
    }

    .blog__post li .btn {
        margin-left: 32px;
    }

    .blog__tags {
        height: 290px;
    }

}

@media only screen and (min-width: 1800px) {

    .blog__post .taxonomy-category a {
        font-size: 16px;
    }

    .blog__categories li a, .blog__tags li a {
        font-size: 16px;
    }

}