.c-news {
	padding: 50px 0 140px 0;
	// padding: 140px 0;

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 48px;
		border-bottom: 1px solid rgba($color-brand-blue, 0.1);
	}

	&__title {
		@include title-bigger();
        font-size: 32px;
        font-weight: 500;

        span {
            color: $color-purple;
        }
	}

	&__content {
		opacity: 0;
		visibility: hidden;
		height: 100px;
		margin-top: 55px;

		&.is-loaded {
			opacity: 1;
			visibility: visible;
			height: auto;
		}
	}

	&__actions {
		display: flex;
	}

	&__controls {
		display: flex;
		justify-content: flex-end;
		margin-right: 70px;

		> button {
			display: block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			padding: 0;
			background-color: rgba(#00a4cc, 0.3);
			transition: 0.3s background-color;
			font-size: 14px;
			color: #00a4cc;

			&:not(:first-child) {
				margin-left: 8px;
			}

			&:disabled {
				opacity: 0.3;
				pointer-events: none;
				cursor: default;
			}
		}
	}

	@include media-breakpoint-up(lg) {
		&__controls {
			> button {
				&:hover {
					background-color: rgba(#00a4cc, 0.3);
				}
			}
		}
	}

	@include media-breakpoint-down(md) {
		padding: 109px 0 140px 0;

		.container {
			padding: 0;
		}

		&__header,
		&__footer {
			margin-left: 40px;
			margin-right: 40px;
		}

		&__header {
			padding-bottom: 35px;
		}

		&__content {
			margin-top: 48px;
		}

		&__controls {
			margin-right: 0;
		}

		&__footer {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			margin-top: 70px;

			.c-button {
				grid-column: 2;
			}
		}
	}

	@include media-breakpoint-down(sm) {
		&__header,
		&__footer {
			margin-left: 20px;
			margin-right: 20px;
		}

		&__footer {
			grid-template-columns: repeat(2, 1fr);

			.c-button {
				grid-column: 1;
			}
		}
	}
}
