@import '../../../styles/fills';
@import '../../../styles/mixins';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/colors';

.linkCard {
	display: flex;
	width: 100%;
	
	&_container {
		display: inline-block;
		max-width: 302px;
		min-width: 132px;
		width: 100%;
	}
	
	&_card {
		height: 88px;
		background-color: $primary-color;
		border-radius: 8px 8px 0 0;
	}

	&_textSection {
		box-sizing: border-box;
		height: 136px;
		border: 1px solid $gray;
		border-radius: 0 0 8px 8px;
		background-color: $white;
	}

	&_linkHeader {
		@include text-3;
		line-height: 23px;
		margin-bottom: 11px;
		font-weight: bold;
	}

	&_list {
		@include text-5;
		height: 66px;
		width: 100%;
		line-height: 22px;
		text-overflow: ellipsis;
	}
	&_link {
		color: $deep-gray;
		display: block;
		text-decoration: none;
	}
	
	&_icon {
		height: 65px;
		width: 65px;
		display: block;
		margin: auto;
		padding-top: 20px;
		path {
			fill: $white
		}
	}
	@include media-xs-down {
	
		&_list {
			@include text-6;
			height: 66px;
			max-width: 204px;
			width: 100%;
			line-height: 18px;
		}
	}

	@include media-xxs-down {
	
		&_list {
			@include text-6;
			height: 66px;
			max-width: 204px;
			width: 100%;
			line-height:12px;
		}
		&_textSection {
			box-sizing: border-box;
			height: 136px;
			max-width: 302px;
			width: 100%;
			border: 1px solid $gray;
			border-radius: 0 0 8px 8px;
			background-color: $white;
			padding: 14px 20px 0px 20px;
		}
	}
}
