.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 {
flex: 1 1 300px;
min-width: 300px;
max-width: 400px;
height: 260px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
line-height: 1.8;
text-transform: uppercase;
padding: 1em;
box-sizing: border-box;
/* remove background and border if you don’t want the box look */
background: none;
border: none;
}