@layer components.page-news {
  	[data-c-page-news] {
  		color: var(--color-dark-blue);
  		padding-top: 50px;
  		padding-bottom: 50px;

  		@media screen and (max-width: 767px) {
  			padding-top: 25px;
  			padding-bottom: 25px;
  		}

  		.title {
  			font-size: var(--font-size-5xl);
  			font-family: var(--font-family-serif);
  			font-weight: var(--font-weight-extra-bold);
  			line-height: 100%;
  			text-align: center;

  			@media screen and (max-width: 1199px) {
  				font-size: var(--font-size-4xl);
  			}
  		}

  		.load-more-button {
  			text-align: center;
  		}
  	}
  }



  [data-slider="news"] {
  	margin-top: 50px;

  	@media screen and (max-width: 1200px) {
  		margin-top: 30px;
  	}

  	&.swiper-initialized {
  		margin-bottom: 50px;

  		@media screen and (max-width: 1200px) {
  			margin-top: 30px;
  			margin-bottom: 30px;
  		}
  	}


  	.swiper-wrapper {
  		display: flex;
  		padding-bottom: 50px;

			@media screen and (max-width: 767px) {
				padding-bottom: 20px;
			}

  		.swiper-slide {
  			flex-shrink: 0;
  			width: 100%;
  			height: auto;
  			position: relative;
  		}
  	}

  	.swiper-pagination {
  		bottom: 0;

  		.swiper-pagination-bullet {
  			border-radius: 0;
  			width: 30px;
  			height: 6px;
  			background-color: var(--color-light-blue);
  			opacity: 1;
  			transition: background-color 0.3s ease;

  			&:hover {
  				background-color: var(--color-red);
  			}
  		}

  		.swiper-pagination-bullet-active {
  			background-color: var(--color-dark-blue);
  		}
  	}

  	@media screen and (min-width: 1200px) {
  		.swiper-wrapper {
  			display: flex;
  			flex-direction: column;
  			gap: var(--space-10);
  		}

  		.swiper-slide {
  			width: auto;
  		}

  		.swiper-pagination {
  			display: none;
  		}
  	}

  }