.banner-container {
height: 30%;
overflow: hidden;
position: relative;
}
.banner-container img {
width: 100%;
position: relative;
top: -70%;
object-fit: cover;
border-radius: var(--border-radius-medium);
}
.card-patreon img {
filter: invert(32%) sepia(19%) saturate(5052%) hue-rotate(328deg) brightness(125%) contrast(110%); /* https://codepen.io/sosuke/pen/Pjoqqp */
}
.ritual-columns {
display: flex;
gap: 2em;
justify-content: center;
margin-top: 2em;
font-style: italic;
font-family: Georgia, serif;
color: #c2a8ff;
opacity: 0.85;
flex-wrap: wrap;
}
.ritual-block {
width: 420px; /* fixed width for both blocks */
height: 360px; /* fixed height to prevent scroll */
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
line-height: 2.2;
text-transform: uppercase;
background-color: #0f0f14;
border-radius: 10px;
padding: 1.5em;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(50, 30, 80, 0.4); /* optional glow */
}