.drinkCart {

	&List {
		display: flex;
		flex-direction: column;
	}

	&Item {
		display: grid;
		grid-template-areas: "drinkName drinkQuantity drinkCross drinkPrice";
		grid-template-columns: 1fr minmax(100px, 20%) 5% 10%;
		grid-template-rows: 100%;
		grid-gap: 5px;
		align-items: center;

		&:not(:last-child) {
			margin-bottom: 1rem;
		}
	}

	&PItem {
		display: grid;
		grid-template-areas: "drinkName drinkQuantity drinkCross drinkPrice";
		grid-template-columns: 1fr 10% 5% 10%;
		grid-template-rows: 100%;
		grid-gap: 5px;
		align-items: center;

		&:not(:last-child) {
			margin-bottom: 1rem;
		}
	}

	&Name {
		grid-area: drinkName;
	}


	&Cross {
		grid-area: drinkCross;
	}

	&Quantity {
		grid-area: drinkQuantity;
	}

	&Price {
		grid-area: drinkPrice;
		white-space: nowrap;
	}
}

.column>.box>.title{
	padding: 10%;
}