#main {
    margin-top: clamp(47px, 200rem, 140px);
}

main * {
    font-size: clamp(15px, 40rem, 24px);
    font-weight: 500;
}

#main h1 {
    color: var(--accent-text);
    text-align: center;
    font-size: var(--text-2);
}

.archive-header {
    text-align: left;
    margin-bottom: 20px;
}

.timbilding-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 50rem, 40px);
}

.timbilding-item {
    flex: 0 1 calc((100% - 80px) / 3);
}

.timbilding-link {
    background: #F6F6F8;
    border-radius: clamp(12px, 30rem, 20px);
    padding: clamp(16px, 40rem, 24px);
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    display: block;
    height: 100%;
    transform: scale(1) translateY(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform, box-shadow;
}

.timbilding-link:hover,
.timbilding-link:focus-visible {
    transform: scale(1.02) translateY(2px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}

.timbilding-thumb-img {
    width: 100%;
    height: clamp(160px, 420rem, 260px);
    object-fit: cover;
    display: block;
    margin: 0 auto clamp(12px, 30rem, 16px);
    border-radius: clamp(16px, 40rem, 24px);
}

.timbilding-thumb-placeholder {
    width: 100%;
    height: clamp(160px, 420rem, 260px);
    border-radius: clamp(16px, 40rem, 24px);
    background: #E9E9EE;
    margin-bottom: clamp(12px, 30rem, 16px);
}

.timbilding-item-title {
    font-size: clamp(16px, 35rem, 22px);
    margin-bottom: clamp(8px, 20rem, 12px);
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
}

.timbilding-item-excerpt {
    font-size: clamp(14px, 30rem, 20px);
    color: #333;
}

@media (max-width: 1024px) {
    .timbilding-item {
        flex-basis: calc((100% - 40px) / 2);
    }
}

@media (max-width: 560px) {
    .timbilding-item {
        flex-basis: 100%;
    }
}