/* --------------------------------
OCCASION
---------------------------------- */
.occasion-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width:var(--width-max);
margin: 0 auto;
}

.occasion-card {
position: relative;
display: block;
padding:2rem;
border: 1px solid var(--color-line1);
border-radius: .3rem;
text-decoration: none;
background:#FFF;
box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
border:0px #FF0000 solid;
}

.occasion-card__circle{
position:absolute;
right:-26px;
top:-26px;
width:140px;
height:140px;
border-radius:50%;
background:var(--color5);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.occasion-card__circle img{
width:100%;
height:100%;
object-fit:cover;
/* filter: grayscale(1) blur(1px); */
transition:
filter .5s ease,
transform .5s ease;
}

.occasion-card:hover {
transform: translateY(-5px);
border-color: rgba(181, 139, 87, .55);
box-shadow: 0 20px 46px rgba(88, 61, 36, .14);
}

.occasion-card:hover .occasion-card__circle img{
filter:grayscale(0) blur(0);
transform:scale(1.08);
}

.occasion-card__num {
display: block;
margin: 0 0 5rem 0;
color: var(--color-gray3);
font-family: "number", serif;
font-size: 1.4rem;
letter-spacing: .1em;
}

.occasion-card h3 {
margin: 0 0 2rem 0;
font-family: "mincho", serif;
font-size:2.3rem;
letter-spacing: .08em;
}

.occasion-card p {
margin: 0;
padding:0 0 2rem 0;
color: var(--color-gray2);
font-family: "mincho", serif;
font-size: 1.4rem;
line-height: 1.75;
letter-spacing: .04em;
}


/* ///////////////////// */
@media (max-width: 1024px) {
.occasion-grid {
grid-template-columns: repeat(2, 1fr);
}

}

/* ///////////////////// */
@media (max-width: 600px) {
.occasion-grid {
grid-template-columns: 1fr;
}

}