<blockquote class="blockquote--normal">
<p>But we are here because this man, this United States Marine, faced down that terrible explosive power, that unforgiving force, with his own body -- willingly and deliberately -- to protect a fellow Marine. When that grenade exploded, Kyle Carpenter’s body took the brunt of the blast. His injuries were called “catastrophic.” It seemed as if he was going to die. While being treated, he went into cardiac arrest, and three times, he flatlined. Three times, doctors brought him back.</p>
<p class="cite">President Obama -- at the Medal of Honor Ceremony for Kyle Carpenter</p>
</blockquote>
<blockquote class="blockquote--{{ name }}">
<p>{{ body }}</p>
<p class="cite">{{ cite }}</p>
</blockquote>
{
"body": "But we are here because this man, this United States Marine, faced down that terrible explosive power, that unforgiving force, with his own body -- willingly and deliberately -- to protect a fellow Marine. When that grenade exploded, Kyle Carpenter’s body took the brunt of the blast. His injuries were called “catastrophic.” It seemed as if he was going to die. While being treated, he went into cardiac arrest, and three times, he flatlined. Three times, doctors brought him back.",
"cite": "President Obama -- at the Medal of Honor Ceremony for Kyle Carpenter",
"name": "normal"
}
.blockquote--normal {
padding-inline-start: 1.5em;
border-inline-start: 5px solid var(--oklch-color-azure);
}
.cite {
font-weight: 700;
margin-top: 1em;
}
.blockquote--center {
margin: 0 auto;
text-align: center;
width: 80%;
width: 80ch;
border-block-start: 5px solid var(--oklch-color-azure);
border-block-end: 5px solid var(--oklch-color-azure);
& p:first-child {
margin-block-start: 1em;
}
& p:last-child {
margin-block-end: 1em;
}
}
.blockquote--large {
font-size: 1.5rem;
width: 60ch;
}
.blockquote--single-top {
border-block-start: 5px solid var(--oklch-color-azure);
& p:first-child {
margin-block-start: 1rem;
}
}
.blockquote--single-bottom {
border-block-end: 5px solid var(--oklch-color-azure);
& p:last-child {
margin-block-end: 1rem;
}
}
.blockquote--single-both {
border-block-start: 5px solid var(--oklch-color-azure);
border-block-end: 5px solid var(--oklch-color-azure);
& p:first-child {
margin-block-start: 1em;
}
& p:last-child {
margin-block-end: 1em;
}
}
.blockquote--double-both {
border-top: 10px double var(--oklch-color-azure);
border-bottom: 10px double var(--oklch-color-azure);
& p:first-child {
margin-block-start: 1em;
}
& p:last-child {
margin-block-end: 1em;
}
}