.detail{
	padding: 5rem 0;
}

.detail__wrapper{
	display: flex;
	gap: 2rem;
}

.detail__left{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 70%;
}

.detail__right{
	width: 30%;
}

.detail__img{
	height: 50rem;
}

.detail__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.detail__date{
	font-size: var(--text-size);
	color: var(--color-secondary);
}

.detail__title{
	font-size: var(--h1-size);
	font-weight: 600;
	text-transform: capitalize;
}

.detail__text{
	text-align: justify;
}


.latest__wrapper{
	min-height: 30rem;
	background-color: #f3f3f3;
	padding: 4rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.latest__top{
	font-size: var(--text-large);
	font-weight: 600;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 2rem;
}

.latest__bottom{
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.latest__item{
	display: flex;
	gap: 2rem;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 2px 0px;
}

.latest__content{
	width: 55%;
}

.latest__img{
	width: 45%;
	height: 10rem;
	overflow: hidden;
}

.latest__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .4s;
}

.latest__img img:hover{
	transform: scale(1.1);
}

.latest__date{
	font-size: var(--text-small);
	color: var(--color-secondary);
}

.latest__title{
	text-transform: capitalize;
	font-size: var(--text-size);
	font-weight: 600;
	transition: all .4s;
}

.latest__title:hover{
	color: var(--color-primary);
}


@media (max-width: 782px) {
	.detail__wrapper{
		flex-direction: column;
	}
	.detail__right{
		width: 100%;
	}
	.detail__left{
		width: 100%;
	}
}