:root {
	--container-width: 103rem;
	--container-width-narrow: 60rem;
	--paddings: 1.5rem;
	--gaps: 1rem;
	--color-blue: #4981B8;
	--color-blue-darker: #204B77;
	--color-blue-dark: #123559;
	--color-white: #FFFFFF;
	--color-gray: #EDF1F5;
	--color-gray-darker: #DADFE5;
	--color-border: rgba(0, 0, 0, .15);
	--color-text-dark-h: rgba(0, 0, 0, .95);
	--color-text-dark-m: rgba(0, 0, 0, .70);
	--color-text-dark-l: rgba(0, 0, 0, .35);
	--color-text-light-h: rgba(255, 255, 255, .95);
	--color-text-light-m: rgba(255, 255, 255, .70);
	--color-text-light-l: rgba(255, 255, 255, .35);
	--font-main: "Inter", sans-serif
}


.tenderCard {
	padding: var(--gaps);
	gap: var(--gaps);
	background: var(--color-gray);
	border-radius: .5rem;
	display: grid;
	grid-template-areas: "head head status""price price price""more more more"
}

@media screen and (min-width: 1200px) {
	.tenderCard {
		grid-template-areas: "head head head price""status blank blank more"
	}
}

.tenderCard-head {
	grid-area: head
}

.tenderCard-status {
	grid-area: status
}

.tenderCard-priceBlock {
	grid-area: price;
	padding-bottom: var(--gaps);
	border-bottom: 1px solid var(--color-border)
}

@media screen and (min-width: 1200px) {
	.tenderCard-priceBlock {
		justify-self: end
	}
}

.tenderCard-readMore {
	grid-area: more;
	justify-self: start
}

@media screen and (min-width: 1200px) {
	.tenderCard-readMore {
		justify-self: end
	}
}

.tenderCard-readMore.button {
	font-size: 1rem
}

.tenderCard-title {
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: none;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: .75rem
}

.tenderCard-endDate {
	font-size: .75rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-text-dark-m);
	display: flex;
	gap: .25rem;
	margin: 0
}

.tenderCard-endDateValue {
	font-weight: 600
}

.tenderCard-status {
	font-size: .75rem;
	line-height: 1;
	background: #5cb85c;
	color: var(--color-text-light-h);
	padding: .375rem .5rem;
	border-radius: .5rem;
	text-align: center;
	margin: 0;
	justify-self: end;
	align-self: start
}

@media screen and (min-width: 1200px) {
	.tenderCard-status {
		justify-self: start
	}
}

.tenderCard-price {
	display: flex;
	align-items: baseline;
	gap: .5rem
}

.tenderCard-priceCaption {
	font-size: .75rem;
	line-height: 1.5;
	flex: 1 0 0
}

.tenderCard-priceValue {
	background: var(--color-blue-darker);
	color: var(--color-text-light-h);
	padding: .375rem .5rem;
	border-radius: .5rem;
	display: flex;
	gap: .1875rem;
	flex: 0 0 0;
	text-wrap: nowrap;
	white-space: nowrap;
	font-size: .75rem;
	line-height: 1
}