/* @group @variables */

[class*="m-event-detail-link"] {
--event-detail-link-grid-template-columns: .75rem 1fr .75rem;
--event-detail-link-grid-template-rows: .75rem 3rem auto .75rem auto .75rem auto .75rem 1fr .75rem;
--event-detail-link-gap: ;
--event-recruitment-grid-column: 1 / span 2;
--event-recruitment-grid-row: 1 / span 2;
--event-cover-grid-column: 1 / span 3;
--event-cover-grid-row: 1 / span 3;
--event-title-grid-column: 2;
--event-title-grid-row: 5;
--event-date-grid-column: 2;
--event-date-grid-row: 7;
--event-info-grid-column: 2;
--event-info-grid-row: 9;
--head-3-color: var(--color-text);
}

/* @end @variables */

/* @group @m-event-detail-link */

[class*="m-event-detail-link"] {
display: grid;
grid-template-columns: var(--event-detail-link-grid-template-columns);
grid-template-rows: var(--event-detail-link-grid-template-rows);
gap: var(--event-detail-link-gap);
}

[class*="a-event-cover"] {
grid-column: var(--event-cover-grid-column);
grid-row: var(--event-cover-grid-row);
}

[class*="a-event-recruitment"] {
grid-column: var(--event-recruitment-grid-column);
grid-row: var(--event-recruitment-grid-row);
}

[class*="a-event-title"] {
grid-column: var(--event-title-grid-column);
grid-row: var(--event-title-grid-row);
}

[class*="a-event-date"] {
grid-column: var(--event-date-grid-column);
grid-row: var(--event-date-grid-row);
}

[class*="a-event-detail-info"] {
grid-column: var(--event-info-grid-column);
grid-row: var(--event-info-grid-row);
}

/* @end @m-event-detail-link */

/* @group @m-event-detail-link */

[class*="m-event-detail-link"] {
box-sizing: border-box;
position: relative;
z-index: 1;
background-color: var(--background-color);
border-radius: .75rem;
}

[class*="m-event-detail-link"]:before {
content: '';
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 1px var(--border-color),.1875rem .1875rem .75rem -.375rem hsl(220deg 20% 20% / 25%);
opacity: 0;
transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier);
}

[class*="m-event-detail-link"]:hover:before,
[class*="m-event-detail-link"]:focus:before {
opacity: 1;
}

/* @end @m-event-detail-link */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-event-recruitment"] {
--font-size: .75rem;
--font-weight: 500;
}

[class*="a-event-recruitment"] {
--event-recruitment-background-color: hsl(220deg 75% 40%);

}

[class*="a-event-recruitment-soldout"] {
--event-recruitment-background-color: hsl(150deg 75% 40%);

}

[class*="a-event-recruitment-end"] {
--event-recruitment-background-color: hsl(340deg 75% 40%);
}

/* @end @variables */

/* @group @a-event-recruitment */

[class*="a-event-recruitment"] {
position: absolute;
overflow: clip;
width: 6rem;
height: 5.25rem;
border-radius: .75rem 0 0 0;
}

[class*="a-event-recruitment"] span {
box-sizing: border-box;
position: absolute;
display: grid;
justify-content: center;
align-items: center;
width: 6rem;
height: 3.75rem;
padding-top: 1.875rem;
background: red;
background-color: var(--event-recruitment-background-color);
color: var(--color-white);
text-align: center;
transform: rotate(-40deg);
transform-origin: bottom left;
}

/* @end @a-event-recruitment */

/* -------------------------------------------------------- */

/* @group @a-event-cover */

[class*="a-event-cover"] {
overflow: hidden;
border-radius: .75rem .75rem 0 0;
}

[class*="a-event-cover"] img {
width: 100%;
border-radius: inherit;
transition: scale var(--transition-time) 0s var(--transition-cubic-bezier);
}

a:hover [class*="a-event-cover"] img,
a:focus [class*="a-event-cover"] img {
scale: 1.05;
}

/* @end @a-event-cover */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-event-date"] {
--font-size: .875rem;
--line-height: 1.71428571;
--color: var(--color-text);
--icon-width: .875rem;
--icon-height: .875rem;
}

/* @end @variables */

/* @group @a-event-date */

[class*="a-event-date"] {
display: grid;
justify-content: start;
align-items: center;
grid-auto-flow: column;
gap: .375rem;
}

/* @end @a-event-date */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-event-detail-info"] {
--font-size: .75rem;
--icon-width: .75rem;
--icon-height: .75rem;
--color: var(--color-text);
}

/* @end @variables */

/* @group @a-event-detail-info */

[class*="a-event-detail-info"] {
display: grid;
justify-content: start;
grid-auto-flow: column;
gap: .75rem;
}

[class*="a-event-detail-info"] li {
display: grid;
justify-content: start;
align-items: center;
grid-auto-flow: column;
gap: .375rem;
}

/* @end @a-event-detail-info */