/*
Theme Name: Faith Blog
Theme URI: localhost
Author: Carlos Hernandez
Description: Theme built from scratch for Faith's blog.
Text Domain: faithblog
*/

/*
Instructions:
This is the stylesheet. Each section will be marked with a 'header'
name to indicate for which part of the site the style definitions
are for. To jump to one of those sections, just do a search (CTRL+F
in most editors) and search for one of these:

Footer
Front Page
Global Settings
Header
Home/Posts Page/Blog
Single

The only imported file is the fonts.css file.
********************************************************
Add the CSS parts here using the @import property. Add new CSS files in /assets/css folder.
Example: @import url('/assets/css/file.css');
*/

@import url('assets/css/fonts.css');
/* @import url('assets/css/header.css');
@import url('assets/css/front-page.css');
@import url('assets/css/home.css');
@import url('assets/css/single.css');
@import url('assets/css/footer.css'); */


/*
*************************GLOBAL SETTINGS***********************
*/

:root {
     /*
     Variables: Use variables to store stuff that you use repeatedly. Variable names are preceded by 2 dashes. Say there is a particular color you want to use throughout the site, and let's call it my color.
     --my-color: #f2f9d3

     Using the variable:
     .some_element {
          color: var(--my-color);
          border: 1px solid var(--my-color);
     }
     You should only need to set the variables here, and you can use them in any CSS file in the theme.
     */

     /****COLORS****/
     --clr-blue-lite: 210 91% 60%;
     --clr-blue-dark: 211 99% 28%;
     --clr-blue-darker: 211 99% 14%;
     --clr-bluegray: 206 22% 71%;
     --clr-oceanblue: 200 87% 30%;
     --clr-van-white: 39 20% 83%;
     --clr-shadow-black: 230 25% 5%;
     --clr-pink-dark: 323 38% 52%;
     --clr-pink: 323 37% 58%;
     --clr-pink-lite: 323 49% 71%;
     --clr-off-white: 15 17% 95%;
     --clr-white-dull: 0 0% 95%;
     --clr-parking-brown: 24 33% 37%;
     --clr-jc-red: 349 80% 40%;

     /****Default colors****/
     /*Dark*/
     --dark-theme-text-color: hsl(var(--clr-off-white));
     --dark-theme-bg-color: hsl(var(--clr-blue-darker));


     /*Light*/
     --light-theme-text-color: hsl(var(--clr-shadow-black));
     --light-theme-bg-color: hsl(var(--clr-white-dull));


     /**Fonts**/
     --default-font: 'Century Gothic', Arial, Ubuntu, Helvetica, sans-serif;
     --default-heading-font: 'DejaVu Serif', Times, serif;
     --default-font-size: 16px;


     /*Set the REM/EM scale*/
     font-size: var(--default-font-size);

     --header-height: 350px;
     --menu-button-bar-color: hsl(var(--clr-off-white));
     --header-navigation-box-bg: hsla(var(--clr-blue-lite) / .5);
}

/*normalization*/
* {
     margin: 0;
     padding: 0;
     border: none;
     clear: both;
     overflow-wrap: normal;
     white-space: normal;
}

*, *::before, *::after {
     box-sizing: border-box;
}

/*Set some defaults and utility classes*/
html :where(img) {
     display: block;
     height: auto;
     max-width: 100%;
     font-size: 0.65rem; /*For alt text*/
}

body {
     font-family: var(--default-font);
     font-size: 1.2rem;
     width: 100%;
     color: hsl(var(--light-theme-text-color));
     background: hsl(0 0% 95%);
     scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: var(--default-font-size);
  text-rendering: optimizeLegibility;
  letter-spacing: 1px;
}

strong {
  font-weight: bold;
}

figure {
     /*Override WP style*/
     margin: 0;
}

/*Utiliti classes*/
.d-grid {
     display: grid;
}

.d-flex {
     display: flex;
}

.d-flex.reverse {
     flex-direction: row-reverse;
}

.d-flex.column {
     flex-direction: column;
}

.d-flex.column.reverse {
     flex-direction: column-reverse;
}

.d-flex.wrap {
     flex-wrap: wrap;
}

.d-flex.wrap.reverse {
     flex-wrap: wrap-reverse;
}

.line-clamp {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/*
Links:
This is the default setting for all text links. Throughtout the theme, you may want links to display slightly differently. For example, a link in a post will look differently than the links in the nav menu.
The nav menu link style is defined in Header section under the .menu-link class settings (I may have called the class something else and forgotten to come back here to change it. You should be able to
find what the class is by using the browser's Developer Tools. Also, a class with a ":hover" pseudo-class would probably be a good indication that it's a link).
*/

a, button, input[type=submit] {
     cursor: pointer;
     transition: 0.2s all ease-in-out;
}

a{
     display: inline-block;
     font-weight: bold;
     text-decoration: none;
     color: hsl(var(--clr-blue-dark));
}

/* a:visited {
     color: inherit;
} */

a:hover {
     text-decoration: underline;
     color: red;
}

/*General Content: Things like page titles, blockquotes, etc, that are supposed to display the same will go here. If a specific use case (i.e. .front-page.page-title) is needed, it will be in its respective section.
*/

.content_container {
     width: min(100%, 960px);
     margin-inline: auto;
}

/*I think Faith likes the big cards, so the posts page will be 100% width*/
.blog > .content_container {
     width: 100%;
     padding-inline: 0;
}

.page-title {
     font-family: var(--default-heading-font);
     font-size: 2rem;
     font-weight: bold;
     margin-block: 1.5em;
     text-align: center;
}

.article__content {
	padding: 2rem 1rem;
}

.article__content > p {
     margin-block: 1rem;
     line-height: 1.5;
}

.wp-block-quote {
     font-family: 'DejaVu Serif';
     font-style: italic;
     line-height: 1.5;
     width: 95%;
     margin: 1rem auto;
     padding: 0.5em 1em;
     border: none;
     box-shadow: 0.25em 0.25em 0.5em hsla(var(--clr-blue-lite) / .5);
}

.jc_quote {
     color: hsl(var(--jc-red));
}

.wp-block-pullquote {
     margin-block: 2em 0;
     margin-inline: auto;
     padding-block: 1em;
     padding-inline: 1em;
     background-color: hsl(var(--clr-blue-lite) / .75);
     text-align: center;
}

.wp-block-pullquote p {
     margin-block: 0 1em;
}

.wp-block-pullquote.poem {
     width: min(100%, 624px);
}

.wp-block-quote cite {
     color: hsl(var(--clr-off-white));
     padding: 0.1em 0.5em;
     background: hsl(var(--clr-oceanblue));
}

.privacy p {
     margin: 1em 0;
}

.pagination {
     text-align: center;
     margin: 1em 0;
}

.nav-links {
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 25px;
}

.page-numbers {
     display: inline-block;
     padding: 0.5em 1em;
     color: hsl(var(--clr-off-white));
     font-weight: bold;
     background: hsl(var(--clr-blue-lite) / 60%);
     transition: 0.2s ease-in-out;
}

.page-numbers:visited {
     color: hsl(var(--clr-off-white));
}

.page-numbers:hover:not(.current):not(.inactive) {
     text-decoration: none;
     background: hsl(var(--clr-blue-lite));
     color: hsl(var(--clr-off-white));
}

.page-numbers.current {
     background: hsl(var(--clr-oceanblue));
}

.page-numbers.current:hover,
.page-numbers.inactive:hover {
     cursor: default;
}

.next.page-numbers {
     border-radius: 0 25px 25px 0;
}

.prev.page-numbers {
     border-radius: 25px 0 0 25px;
}

.page-numbers.next.inactive,
.prev.page-numbers.inactive {
     background: hsl(var(--clr-bluegray));
}

#wpadminbar {
     background: hsl(var(--clr-blue-dark));
}

/*
*************************HEADER***********************
*/

/*Header Image*/
.custom_header {
     height: var(--header-height);
     justify-content: space-between;
}

.custom_header.has_header_image {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 60% 76%;
}

.header_site_logo {
     max-width: 95%;
     margin-inline: auto;
     padding-block-start: clamp(1em,20vw,var(--header-site-logo-max-padding, 2em));
}

/*Search & Main Navigation*/
.header_navigation_box {
     position: relative;
     /* background-color: var(--header_navigation_box_bg); */
     padding-block: 0.5rem;
     padding-inline: 0.5rem;
     justify-content: space-between;
     gap: 1rem;
}

.header_navigation_box.sticky {
     background-color: hsl(var(--clr-blue-lite) / .85);
     position: fixed;
     width: 100%;
     z-index: 999;
}

/*Search*/
.header_search_form_container {
     flex: 1;
     display: flex;
     justify-content: center;
}

.header_search_form_container > form {
     display: flex;
     height: 100%;
}

.faith-block-search__inside-wrapper {
	display: flex;
     justify-content: center;
	/* grid-template-columns: auto 50px; */
}

.search__input {
     padding-block: 0.3rem;
     padding-inline: 2rem;
     width: min(50vw,var(--fixed-width,330px));
     border-radius: 2rem 0 0 2rem;
     background-color: var(--light-theme-bg-color);
}

.search__input:focus-visible,
.search-button:focus-visible {
     outline: 4px solid hsl(var(--clr-pink-lite));
}

.search-button {
     background-color: hsl(var(--clr-blue-dark));
     border-radius: 0 2rem 2rem 0;
     transition: background-color 250ms ease-in-out;
}

.search-button.has-icon {
     padding-block: 9px 0;
     padding-inline: 9px;
}

.search-button:hover,
.search-button:focus-visible {
     background-color: hsl(var(--clr-blue-darker));
}

.search-icon {
     width: 30px;
     height: 30px;
     fill: hsl(var(--clr-off-white));
     transition: fill 250ms ease-in-out;
}

.search-button:hover .search-icon,
.search-button:focus-visible .search-icon {
     fill: hsl(var(--clr-pink-dark));
}



/*Main Navigation*/
.menu_button {
     background-color: transparent;
     height: 100%;
     justify-content: center;
     gap: 7px;
}

.menu_button :is(.bar1,.bar2,.bar3) {
     width: 32px;
     height: 3px;
     border-radius: 5px;
     background-color: var(--menu-button-bar-color);
     transform-origin: center;
     translate: 0;
     rotate: 0;
     transition: rotate 100ms ease,
          translate 100ms ease 100ms;
}

.menu_button.open .bar1 {
     translate: 0 10px;
}

.menu_button.open :is(.bar1, .bar2) {
     rotate: 45deg;
}

.menu_button.open .bar3 {
     translate: 0 -10px;
     rotate: -45deg;
}

.menu_button.open :is(.bar1,.bar2,.bar3) {
     transition: translate 100ms ease,
          rotate 100ms ease 100ms;
}

.responsive_menu_content {
     flex-direction: column;
     position: absolute;
     top: 100%;
     right: 0;
     gap: 0.5rem;
     padding-block: 0.5rem;
     width: 100%;
     height: calc(100vh - var(--header-height));
     align-items: end;
     background-color: hsl(var(--clr-blue-lite));
     scale: 0;
     opacity: 0;
     transform-origin:  top right;
     transition: scale 200ms ease-in-out 200ms,
          opacity 150ms 400ms;
     z-index: 999;
}

.responsive_menu_content.closed {
     display: none;
}

.responsive_menu_content.open {
     scale: 1;
     opacity: 1;
     transition: opacity 150ms ease-in-out,
          scale 200ms ease-in-out 50ms;
}

.header_nav {
     flex-direction: column;
     gap: 0.5rem;
     width: 100%;
     align-items: end;
}

.header_nav .menu-item {
     width: 100%;
     padding: 1em;
     color: hsl(var(--clr-off-white));
     font-size: max(1rem,16px);
     font-weight: bold;
     font-variant: small-caps;
     text-align: start;
     transition: all 250ms ease-in-out;
}

.header_nav .menu-item:visited {
     color: hsl(var(--clr-off-white));
}

.header_nav :is(.menu-item:hover,.menu-item:focus-visible) {
     background-color: hsl(var(--clr-blue-dark));
     color: hsl(var(--clr-pink-lite));
     text-decoration: none;
     outline: none;
}

.header_nav :is(.menu-item.active,
.menu-item.active:hover,
.menu-item.active:focus-visible) {
     color: hsl(var(--clr-off-white));
     background-color: hsl(var(--clr-oceanblue));
     cursor: default;
}

/*
*************************HOME/FRONT PAGE***********************
*/

/*This is a special class for the image in the front page. It should only
 apply in larger screens.*/
@media only screen and (min-width: 600px) {
.front_page_image {
     float: left;
     width: 50% !important;
     margin: 0 1em 1em 0 !important;
     box-shadow: 4px 4px 6px hsl(var(--clr-shadow-black) / 0.5);
 }

 .home > .content_container > .article__content > p {
     clear: none;
 }

}

 /*
*************************POSTS PAGE/BLOG/SEARCH/ARCHIVE/404***********************
*/

.blog-card_list_container {
     grid-template-columns: 100%;
     gap: 1.5rem;
     margin-block-end: 2rem;
}

.card__link {
     --list-item-shadow-color : hsla(var(--clr-shadow-black) / .25);
     color: var(--light-theme-text-color);
     box-shadow: 0 5px 5px var(--list-item-shadow-color);
     transition: color 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

.card__link:hover {
     --list-item-shadow-color: hsl(var(--clr-pink));
     text-decoration: none;
     color: inherit;
}

.card__link:hover .card__meta-title {
     color: hsl(var(--clr-blue-lite));
}

.blog_list-item {
     height: 100%;
}

.card__image-container {
     background: linear-gradient(-25deg, hsl(var(--clr-blue-dark)), hsl(var(--clr-blue-lite)));
}

.card__image {
     width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;
}

.card__image.no-image {
     display: block;
}

.card__meta {
     padding: 1rem;
     font-weight: normal;
     gap: 1rem;
     height: 100%;
}

.card__meta-title {
     -webkit-line-clamp: 2;
     font-family: var(--default-heading-font);
     font-weight: bold;
     transition: color 250ms ease-in-out;
}

.card__meta-excerpt {
     -webkit-line-clamp: 3;
}

.card__meta-pubdate {
     font-size: .82rem;
     font-style: italic;
     letter-spacing: 1px;
     text-align: end;
     opacity: .7;
}

body.error404 .blog_posts_container p,
.message.no-results {
     clear: none;
     font-size: 1.4rem;
}

.is_404 > * {
     margin-block: 2rem;
}

.page-title.search,
.page-title.no-results {
     font-size: 2.5rem;
}

.term {
     font-size: 1.75rem;
     font-style: italic;
     text-align: center;
     margin-bottom: 0.7em;
}

.is_404 .page-title {
     font-size: 2.5rem;
     text-align: center;
}

.is_404 .blog_posts_container {
     padding-inline: 1rem;
}

.is_404_img, .blog_posts_container p {
     margin: 1rem auto;
}

.search-no-results .blog-card_list_container {
     justify-items: center;
}

.message.no-results {
     padding-inline: 1rem;
}
/*
*************************SINGLE***********************
*/

.wp-block-quote + .wp-block-image {
     margin: 2em 0 1em;
}

.post_meta {
     margin-block: 1.5em;
     gap: 0.5em;
}

.post_meta .page-title {
     margin-block: 0;
}

.post-featured-img-container {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 960px;
     margin: 1em auto;
}

.post-featured-img-container img {
     display: block;
     width: 100%;
     max-width: 960px;
     max-height: 540px;
     object-fit: cover;
     object-position: center;
}

.post-featured-img-caption,
.wp-element-caption {
     /*WordPress sets inline styles for image captions in posts. Very annoying. Now we have to use the !important override.*/
     width: 100%;
     margin-block: .5em 1em !important;
     padding: 0 0.5em;
     color: gray !important;
     font-style: italic;
     font-size: 1rem !important;
     text-align: center !important;
}

.pub-date {
     font-size: 1rem;
     font-weight: bold;
     font-style: italic;
     color: hsl(0, 0%, 47%);
     justify-self: center;
}

.post-content {
     margin-block: 1rem 2rem;
}

.post-content > p {
     margin-block: 1rem;
     margin-inline: 1rem;
     line-height: 1.5;
}

.post-content > p:first-child::first-letter {
     font-family: 'DejaVu Serif';
     color: hsl(var(--clr-pink-dark));
     font-size: 7.4rem;
     line-height: 5rem;
     padding: 6px 8px 0 0;
     text-shadow: 4px 2px 2px hsla(var(--clr-oceanblue) / 0.5);
     float: left;
}

.post-content ul,
.post-content ol {
     width: 80%;
     margin: 1rem auto;
     list-style-position: inside;
}

.post-content li :is(ul,ol) {
     margin: auto;
}

/*Share section*/

.content__share-container {
     margin-block: 2rem;
     padding: 0.5rem;
     background-color: hsl(var(--clr-oceanblue) / .5);
}

.share_heading {
     font-size: 1.3rem;
     font-weight: bold;
}

.share__links {
     gap: 1rem;
     margin-block-start: 0.5rem;
}

.share_link {
	display: flex;
	justify-content: center;
	align-items: center;
     width: 40px;
     height: 40px;
	border: none;
	background-color: transparent;
}

/* .share {
     width:32px;
     height:32px;
} */

.share:hover {
     background-color: hsl(var(--clr-blue-dark)) !important;
     box-shadow: 3px 3px 3px hsl(var(--clr-off-white) / .5);
}

.share:hover path {
     fill: hsl(var(--clr-pink-lite));
}

.content__tags-container {
     flex-wrap: wrap;
     gap: 0em 0.2em;
     margin: 0.5em;
     font-size: 1rem;
}

.tags_heading {
     font-weight: bold;
}

/*Comments*/
.comment-respond {
     display: flex;
     flex-direction: column;
     width: 100%;
     border-top: 5px solid hsl(var(--clr-shadow-black));
     padding: 1em;
     align-items: center;
}

.comment-reply-title {
     font-size: 1.5rem;
     font-weight: bold;
     margin-block-end: 0.5rem;
}

.comment-form {
     width: min(100%,660px);
}

.logged-in-as {
     gap: 2em;
     align-items: end;
     font-size: 1rem;
     font-weight: bold;
}

.user-identity {
     gap: 0.5em;
     align-items: end;
}

.user-identity-edit {
	display: inline-flex;
	align-items: end;
	column-gap: 0.5em;
	font-variant: all-small-caps;
}

.comment-avatar {
     border-radius: 50%;
}

.user-log-out .log-out, .comment-reply-link, .comment-reply-login, #cancel-comment-reply-link {
	color: #fff;
	background: hsl(var(--clr-oceanblue));
	padding: 0.15em 1em;
	border-radius: 25px;
	outline: 2px outset transparent;
}

.user-log-out .log-out:hover, .comment-reply-link:hover, .comment-reply-login:hover, #cancel-comment-reply-link:hover {
	background: hsl(var(--clr-blue-dark));
	outline-color: #000;
	text-decoration: none;
	color: #fff;
}

.comment-form-comment {
     margin-block-start: 1em;
     width: 100%;
}

.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
	font-family: 'Liberation Sans Narrow';
	font-size: 1.2rem;
	padding: 0.5em;
	margin: 0.5em 0;
	width: 100%;
     box-shadow: 3px 3px 3px hsl(var(--clr-shadow-black) / 0.5);
     border-top: 2px solid hsl(var(--clr-shadow-black) / 0.3);
     border-left: 1px solid hsl(var(--clr-shadow-black) / 0.3);
	outline: 2px inset transparent;
	transition: 0.2s ease-in-out;
}

.comment-form textarea {
     resize: none;
     font-size: 1.4rem;
}

.char_count_container {
	width: 100%;
	text-align: right;
	color: hsl(var(--clr-bluegray));
}

.form-submit {
	width: 100%;
	text-align: center;
	margin: 0.5em 0;
}

.comment-form input[type="submit"] {
	background: hsl(var(--clr-oceanblue));
	font-size: 1.5rem;
	font-variant-caps: all-small-caps;
	letter-spacing: 2px;
	font-weight: bold;
	color: #fff;
	padding: 0.2em 2em 0.3em;
	border-radius: 25px;
	outline: 2px outset transparent;
}

.comment-form input[type="submit"]:hover {
	background: hsl(var(--clr-blue-dark));
	outline-color: #000;
}

.comment-divider {
	height: 5px;
	width: 100%;
	background: hsl(var(--clr-shadow-black));
}

.comments-title {
     font-size: 1.2rem;
     font-weight: bold;
     width: min(99%,660px);
     margin: 1em auto;
     text-align: center;
}

.comment-list {
     list-style-type: none;
     width: min(99%,660px);
     margin: 1em auto;
}

.comment-list .comment {
	margin-bottom: 1em;
	border: 1px solid hsl(var(--clr-blue-dark));
	background: var(--light-theme-bg-color);
     box-shadow: 0 4px 8px hsl(var(--clr-shadow-black) / 45%);
}

.comment-meta-container {
	display: grid;
	grid-template-columns: 40px auto;
	grid-template-rows: 20px 20px;
	grid-gap: 0.2em 0.5em;
     align-items: center;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background: hsl(var(--clr-blue-dark));
     font-size: 1.1rem;
	color: #fff;
}

.comment-list > .even > .comment-body > .comment-meta-container, .children > .even > .comment-body > .comment-meta-container {
	background: hsl(var(--clr-blue-dark));
}

.comment-list > .odd > .comment-body > .comment-meta-container,
.children > .odd > .comment-body > .comment-meta-container {
     background: hsl(var(--clr-bluegray));
}

.comment-author-avatar {
	grid-area: 1 / 1 / span 2 / 1;
}

.comment-author-name {
	grid-area: 2 / 2 / 2 / 2;
	line-height: 1;
}

.comment-metadata {
	grid-area: 1 / 2 / 1 / 2;
	display: flex;
	justify-content: space-between;
}

.comment-metadata a, .comment-author-name a {
	color: #fff;
     font-weight: normal;
}

.comment-author-name a {
     font-weight: bold;
}

.edit-link {
     font-size: 1rem;
}

.comment-edit-link::before {
	content: "\270D";
}

.comment-content {
	padding: 0 0.5em;
}

.reply {
	text-align: right;
	padding: 0.5em;
}

.comment-list .children {
     list-style-type: none;
     width: max(250px,95%);
     margin-inline-start: auto;
}

/* Media embeds */
.wp-block-embed iframe {
	display: block;
	width: min(95%, 500px);
	height: auto;
	margin: 0 auto;
}

.wp-embed-aspect-16-9 iframe {
	aspect-ratio: 16/9;
}

/*
*************************FOOTER***********************
*/

.footer_container {
     align-content: center;
     height: 150px;
     background: hsl(var(--clr-blue-dark));
     border-top: 5px solid hsl(var(--clr-blue-lite));
     color: var(--dark-theme-text-color);
     padding: 1em 0;
     margin-top: 1em;
     text-align: center;
}

.menu-footer-container {
     margin-bottom: 2em;
}

.footer_navigation {
     /* display: flex; */
     justify-content: center;
     list-style: none;
     column-gap: 0.5em;
}

.footer_navigation li:not(:first-child)::before {
     content: "|";
     padding-right: 0.4em;
}

.footer_navigation a {
     color: var(--dark-theme-text-color);
     font-weight: bold;
}

.footer_navigation a:visited {
     color: var(--dark-theme-text-color);
}

.footer_navigation a:hover {
     color: var(--dark-theme-text-color);
}

.site_copy,
.site_rights {
     font-size: 1rem
}

#scroll-to-top {
          display: none;
          position: fixed;
          bottom: 170px;
          right: 1em;
          width: 40px;
          height: 40px;
          background: hsl(var(--clr-blue-dark));
          color: var(--dark-theme-text-color);
          text-align: center;
          box-shadow: 0px 0px 1em hsl(var(--clr-oceanblue));
          border-radius: 0.2em;
          z-index: 1000;
}

/*
*************************MISCELLANEOUS***********************
*/

/*
This area is for one-offs and specialty styles, like reusable blocks.
*/

.prompt_group {
	width: 50%;
	font-size: .85rem;
	text-align: center;
}

.prompt_group .wp-block-image {
	margin-top: .5rem;
}

.prompt_group,
.prompt_group [class^="wp-image"] {
     margin-inline: auto;
}