.tariffs {
	background: #F7F9FC;
	padding: 40px 0 0;
}

.tariffs__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
    margin-bottom: 48px;
}

.tariff__card {
	position: relative;
    display: flex;
    flex-direction: column;
	background: #FFFFFF;
    justify-content: space-between;
    gap: 16px;
    width: calc((100% - 2 * 32px) / 3);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1);
}

.tv-cards .tariff__card {
	width: calc((100% - 32px) / 2);
}

.card--action {
	position: absolute;
	top: 0;
	right: 50%;
	transform: translatex(50%);
	font-size: 13px;
	border: 1px solid #e42313;
	color: #e42313;
	padding: 5px 8px;
}

.sep-line {
    border-bottom: 1px solid #BDC1C9;
    padding: 16px 0 0;
    margin: 0 0 16px;
}

.tariff__card-name-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 8px 8px 0 0;
	background-color: #BBD5E066;
	padding: 20px 0;
}

.tariff__card--top {
	display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px 0;
}

.tariff__card--bottom {
    padding: 0 20px 10px;
}

.tariff--title {
	display: inline-block;
	padding-left: 42px;
    font-size: 30px;
    color: var(--text);
    font-weight: 700;
    text-align: center;
    margin: 0 0 20px;
	background-size: 36px !important;
}

.internet-cards .tariff__card:nth-child(1) .tariff--title {
	background: url('../../images/tariff-img/super.png') left center no-repeat;
}

.internet-cards .tariff__card:nth-child(2) .tariff--title {
	background: url('../../images/tariff-img/turbo.png') left center no-repeat;
}

.internet-cards .tariff__card:nth-child(3) .tariff--title {
	background: url('../../images/tariff-img/mega.png') left center no-repeat;
}

.tv-cards .tariff__card:nth-child(1) .tariff--title {
	background: url('../../images/tariff-img/camera.png') left center no-repeat;
}

.tv-cards .tariff__card:nth-child(2) .tariff--title {
	background: url('../../images/tariff-img/stars.png') left center no-repeat;
}

.tv-cards .tariff__card:nth-child(3) .tariff--title {
	background: url('../../images/tariff-img/camera.png') left center no-repeat;
}

.tv-cards .tariff__card:nth-child(4) .tariff--title {
	background: url('../../images/tariff-img/super.png') left center no-repeat;
}
/* 
.tariff--title::before {
  content: open-quote;
  quotes: "«" "»";
}

.tariff--title::after {
  content: close-quote;
  quotes: "«" "»";
} */

.card--tariff-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	gap: 16px;
}

.tariff-info {
    color: #3b4559;
	font-size: 14px;
}


.speed--info,
.tv--info  {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tv--info {
	margin: 0 0 16px;
}

.tariff--price {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tv--info-name,
.mobile--info-name {
    font-weight: 400;
    font-size: 20px;
    color: var(--ttk-grey-1);
}
/* 
.speed--info-name {
    background: url('../../images/tariff-img/wi-fi.svg') right center no-repeat;
}

.tv--info-name {
    background: url('../../images/tariff-img/tv.svg') right center no-repeat;
}

.mobile--info-name {
    background: url('../../images/tariff-img/mobile.svg') right center no-repeat;
} */

.speed--info-fill,
.tv--info-fill {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 4px;
    font-weight: 400;
    font-size: 20px;
    color: var(--text);
}

.speed--info-fill strong {
    font-weight: 700;
    font-size: inherit;
    color: var(--text);
}

.speed--info-fill span,
.tv--info-fill span {
    font-weight: inherit;
    font-size: inherit;
}

.tv--info-action {
    font-weight: 700;
    font-size: 14px;
    color: var(--ttk-grey-3);
}

.tariff--price {
    margin-bottom: 16px;
}

.tariff--price-old {
	display: flex;
    position: relative;
    font-size: 16px;
    width: max-content;
    color: #373f50;
}

.tariff--price-old:after {
    content: "";
    position: absolute;
    width: 100%;
    top: 55%;
    border-bottom: 1px solid #373f50;
}

.tariff--price-action {
    display: flex;
    gap: 4px;
    font-weight: 400;
    font-size: 36px;
    color: var(--text);
    align-items: baseline;
}

.tariff--price-action span {
    font-size: 20px;
    color: var(--text);
}   

.tariff-btn {
    width: 100%;
}

.tariff-open-details {
	display: flex;
    justify-self: center;
    margin: 10px 0 0;
    padding: 10px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px;
    color: inherit;
    transition: 0.2s ease;
    cursor: pointer;
}

.tariff-open-details:hover {
	opacity: 70%;
}

@media screen and (max-width: 1024px) {
	.tariff__card {
		width: calc((100% - 32px) / 2);
	}
}

@media screen and (max-width: 768px) {
	.tariffs__cards {
		gap: 16px;
	}
	
	.tariff__card,
	.tv-cards .tariff__card {
		width: 100%;
	}
	
	.tariff--name, .tariff--title {
		font-size: 20px;
	}
	
	.speed--info-name, 
	.tv--info-name, 
	.mobile--info-name {
		font-size: 16px;
	}
	
	.speed--info-fill,
	.tv--info-fill,
	.mobile--info-fill {
		font-size: 20px;
	}
	
	.speed--info-fill span,
	.tv--info-fill span,
	.mobile--info-fill span {
		font-size: 20px;
	}
	
	.mobile--info-minute,
	.mobile--info-gb,
	.mobile--info-sms {
		font-size: 20px;
	}
	
	.tariff--price-old {
		font-size: 20px;
	}
	
	.tariff--price-action {
		font-size: 28px;
	}
	
	.tariff--price {
		margin-bottom: 8px;
	}

	.mobile--info, .tariff--price {
		gap: 2px;
	}
}