@import url(./common.css);

main.banners_wrap {
    display: flex;
    justify-content: center;
    padding: clamp(100px, 12vw, 160px) clamp(16px, 8vw, 120px) clamp(48px, 8vw, 100px);
    box-sizing: border-box;
}

.banners_section {
    width: 100%;
    max-width: 960px;
    font-family: var(--main_font);
}

.banners_section .section_label {
    display: block;
    margin-bottom: 8px;
}

.banners_section h1 {
    margin: 0 0 clamp(16px, 2.5vw, 28px);
    font-size: clamp(22px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--black);
}

.banners_status {
    margin: 0 0 16px;
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--ink1, #666);
}

.banners_status[hidden] {
    display: none;
}

.banners_list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 20px);
}

.banners_list_item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(18, 18, 18, 0.08);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(87, 122, 115, 0.06);
}

.banners_list_thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 3.5;
    background: #f0f0f0;
}

.banners_list_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .banners_list_thumb {
        aspect-ratio: 16 / 5;
    }
}