编辑“︁模板:Main page/gamebuild”︁


<div id="home-featured" class="home-card home-card--button home_grid1" style="overflow: hidden;padding: 0;background: #242a31;grid-row: span 4;grid-column: span 4;">
<div class="home-card__background">[[File:ATRIheader.jpg]]</div>
<div class="home-card__foreground">
<div class="home-card__label">精选内容</div>
<h3 style="margin-top: 0;font-size: 1rem;" class="home-card__header"><span>ATRI</span></h3>
</div>
</div>
{{#css:

.home_grid1{
    grid-row: span 4;
    grid-column: span 4;
}
.home-card__background img{
width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.mw-parser-output .home-card__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #242a31;
    border-radius: 8px;
}

.mw-parser-output #home-featured .home-card__foreground {
    pointer-events: none;
    right: 15px;
    bottom: 15px;
    left: 15px;
}

.mw-parser-output .home-card__foreground {
    position: absolute;
}

.mw-parser-output .home-card__foreground .home-card__label {
    color: #bababa;
}

.mw-parser-output .home-card__label {
    color: var(--color-base--subtle);
    font-size: 0.8125rem;
    letter-spacing: 0.75px;
}

.mw-parser-output #home-featured {
    overflow: hidden;
}

.mw-parser-output .home-card.home-card--button {
    overflow: hidden;
    padding: 0;
    background: #242a31;
}
.mw-parser-output .home-card--row3 {
    grid-row: span 3;
}
.mw-parser-output .home-card--col2 {
    grid-column: span 2;
}

/* 添加媒体查询，以在小屏幕上调整布局 */
@media screen and (max-width: 720px) {


    .home_grid1 {
        grid-column: auto;
        grid-row: auto; /* 在小屏幕上取消跨行效果 */
    }
}


}}