bitforum-frontend/app/news/style.scss

// NEWS
#news {
	padding: 1.563rem 2rem 2rem 2rem;
	min-width: 410px;
	max-width: 1920px;
	margin: 0 auto;

	> p {
		font-weight: 600;
		font-size: 1.375rem;
		margin-bottom: 1.25rem;

		&.empty {
			text-align: center;
			padding: 3rem 0;
			color: var(--muted-foreground);
			font-weight: 400;
			font-size: 1rem;
		}
	}

	> div > article {
		position: relative;
		overflow: hidden;
		padding: 1rem 0;

		// NEWS
		> div {

			// 기사 대표 이미지
			&:nth-of-type(1) {
				float: left;
				display: block;
				padding-right: 1rem;
				width: clamp(8.75rem, 20%, 12.125rem);

				> img {
					display: block;
					width: 100%;
					height: auto;
					object-fit: cover;
					border-radius: 0.125rem;
					transition: transform 0.07s ease-in-out;

					&:hover, &:focus {
						cursor: pointer;
						transform: scale(1.03);
					}
				}
			}

			// 기사 정보
			&:nth-of-type(2) {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: baseline;

				// 기사 제목
				> a {
					flex: 1 1 auto;
					min-width: 0;
					white-space: normal;
					font-size: 1.275rem;
					font-weight: 500;

					&:hover, &:focus {
						text-decoration: underline;
					}
				}

				// 기사 소스명 + 작성일시
				> span {
					flex: 0 0 auto;
					white-space: nowrap;
					display: flex;
					align-items: center;
					gap: 0.5rem;
					font-size: 0.938rem;
					font-weight: 300;
					margin-top: 0.25rem;
					margin-bottom: 0.625rem;

					> em {
						font-style: normal;
						font-weight: 500;
						color: var(--primary);
						font-size: 0.813rem;
					}
				}
			}

			// 기사 내용
			&.desc {
				font-size: 0.875rem;
				font-weight: 300;
				text-align: justify;
				overflow-wrap: break-word;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}