.homeP-event {
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius-medium );
background: var( --color-surface-1 );
}
.homeP-gameinfo {
display: flex;
align-items: center;
justify-content: space-between;
padding: var( --space-xs ) var( --space-md );
white-space: nowrap;
line-height: 1;
overflow-x: auto;
font-size: var( --font-size-small );
gap: var( --space-xl );
}
.homeP-gameinfo-label {
color: var( --color-subtle );
}
.homeP-gameinfo-list {
display: flex;
}
.homeP-gameinfo-list-item {
display: flex;
align-items: center;
gap: var( --space-xs );
font-weight: var( --font-weight-medium );
}
.homeP-gameinfo-list-item + .homeP-gameinfo-list-item {
margin-left: var( --space-sm );
border-left: 1px solid var( --border-color-base );
padding-left: var( --space-sm );
}
.homeP-event .homeP-card {
height: 5rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.homeP-card {
position: relative;
padding: var( --space-md );
border: 1px solid var( --border-color-base );
background: var( --color-surface-1 );
border-radius: var( --border-radius-medium );
font-size: var( --font-size-small );
}
.homeP-card.homeP-card--button {
overflow: hidden;
padding: 0;
border: 0;
}
.homeP-card--button a {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
padding: 0 var( --space-md );
background: transparent;
color: #fff;
font-weight: var( --font-weight-medium );
}
.homeP-card--button .homeP-card__background a {
padding: 0;
}
.homeP-card--button img {
transition: transform 250ms ease;
}
.homeP-card--button:hover img {
transform: scale( 1.1 );
}
.homeP-card__header {
color: var( --color-emphasized );
font-size: 1rem;
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-xxx-small );
}
.homeP-card__header a {
display: flex;
align-items: center;
justify-content: space-between;
}
.homeP-card__header a:after {
content: '▶';
font-size: var( --font-size-small );
}
.homeP-card__background {
position: absolute;
inset: 0;
}
.homeP-card__background:after {
position: absolute;
pointer-events: none;
inset: 0;
display: block;
background: linear-gradient(to right,#000,transparent);
content: "";
transition: transform 250ms ease;
}
.homeP-card__background picture,
.homeP-card__background img {
width: 100%;
height: 100%;
}
.homeP-card__background img {
object-fit: cover;
object-position: center;
}
.homeP-card__foreground {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: var( --space-md );
display: flex;
flex-direction: column;
justify-content: center;
gap: var( --space-xxs );
color: #fff;
line-height: var( --line-height-xxx-small );
pointer-events: none;
}