@import "../table/_table";


.space-list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px;
    .space-item {
        .tit-area {
            display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
            .label {
                padding: 1px 10px; font-size: 1.5rem; color: #fff; background: var(--navy); border-radius: 5px;
            }
            .tit {
                font-size: 1.8rem; font-weight: 700;
            }
        }
        .img-area {
            border-radius: 10px; overflow: hidden;
            img {
                width: 100%; height: 100%; object-fit: cover; display: block;
            }
        }
    }
}

/* 반응형 */
@media (max-width: 1024px) {
	.space-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px;
		.space-item {
			.tit-area {
				gap: 8px; padding-bottom: 8px;
				.label {
					font-size: 1.4rem; padding: 3px 8px;
				}
				.tit {
					font-size: 1.7rem;
				}
			}
			.img-area {
				border-radius: 5px;
			}
		}
	}
}

@media (max-width: 768px) {
	.space-list {
		gap: 24px 14px;
		.space-item {
			.tit-area {
				flex-wrap: wrap; gap: 6px;
				.label {
					font-size: 1.3rem;
				}
				.tit {
					font-size: 1.6rem;
				}
			}
		}
	}
}

@media (max-width: 480px) {
	.space-list {
		grid-template-columns: 1fr; gap: 20px;
		.space-item {
			.tit-area {
				padding-bottom: 6px;
				.label {
					font-size: 1.25rem;
				}
				.tit {
					font-size: 1.5rem;
				}
			}
		}
	}
}