.package,
.products {
	display: grid;
	grid-template-columns: var(--columns-fill-3);
	gap: var(--gap);

	
	> article {
		cursor: pointer;
		text-align: center;
		
		img {
			border-radius: var(--gap);
		}
		
		&.selected {
			img {
				border: 2px solid var(--pink);	
			}
			* {
				color: var(--pink);	
				font-weight: 500;
			}
		}
		input {
			display: none;
		}
	}
}

dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	dt {
		font-weight: 500;
		display: flex;
		align-items: center;
	}
}

form {
	grid-column: full-width;
	display: grid;
	grid-template-columns: var(--grid);	
	> * {
		grid-column: content;
	}
}