/* Å×½ºÆ® »ó¼¼ »ó´Ü Àü¿ë ·¹À̾ƿô Á¤¸® */

.tl-hero {
    display: grid !important;
    grid-template-columns: minmax(360px, 520px) 1fr !important;
    grid-template-areas:
        "cover meta"
        "stats meta" !important;
    column-gap: 34px !important;
    row-gap: 14px !important;
    align-items: center !important;
}

.tl-cover {
    grid-area: cover !important;
    width: 100% !important;
    max-width: 520px !important;
    justify-self: center !important;
}

.tl-cover img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 630 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08) !important;
}

.tl-stat-row {
    grid-area: stats !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    justify-self: center !important;
}

.tl-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.btn-start {
    margin-top: 14px !important;
}

@media (max-width: 900px) {
    .tl-hero {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "cover"
            "stats"
            "meta" !important;
        gap: 16px !important;
    }

    .tl-cover,
    .tl-stat-row {
        max-width: 100% !important;
    }
}

/* »ó´Ü ´ëÇ¥À̹ÌÁö ¾Æ·¡ °ø¹é Á¦°Å */
.tl-cover {
    aspect-ratio: 1200 / 630 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

.tl-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.tl-stat-row {
    margin-top: 14px !important;
}