1 files changed, 51 insertions, 0 deletions
diff --git a/_sass/main.scss b/_sass/main.scss
index ac8d238..e10513b 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -183,3 +183,54 @@ body {
     align-items: center;
   }
 }
+
+.donation {
+  margin-block-end: 2rem;
+
+  @media (min-width: 48rem) {
+    width: 40%;
+    margin-inline-start: 2rem;
+    float: right;
+  }
+}
+
+.donation-title {
+  font-size: 1.25rem;
+}
+
+.donation-details {
+  margin-top: 1rem;
+  background-color: var(--color-neutral-900);
+  border: 1px solid var(--color-neutral-800);
+  border-radius: 0.5rem;
+}
+
+.donation-summary {
+  display: flex;
+  align-items: center;
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  gap: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M4.22 6.222a.75.75 0 0 1 1.06 0L8 8.942l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  background-position: right 1rem top 50%;
+  background-repeat: no-repeat;
+  list-style: none;
+  cursor: pointer;
+}
+
+.donation-summary + p {
+  padding: 1rem;
+}
+
+.donation-details[open] .donation-summary {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M11.78 9.783a.75.75 0 0 1-1.06 0L8 7.063l-2.72 2.72a.75.75 0 1 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  border-bottom: 1px solid var(--color-neutral-800);
+}
+
+.donation-note {
+  margin-block-start: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-neutral-600);
+}