main {
	
	> section {
		display: flex;
		gap: calc(var(--gap) * 2);
		
		> * {
			width: 100%;
		}
		
		> div {
			> figure {
				position: relative;
				> span {
					position: absolute;
					top: calc(var(--gap) / 2);
					left: calc(var(--gap) / 2);
					font-size: .75em;
					background: var(--red);
					color: white;
					padding: 2px calc(var(--gap) / 2);
					border-radius: 100vw;
				}
			}	
			> div {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				gap: calc(var(--gap) / 5);
				
				.border {
					outline: 2px solid var(--red);
					outline-offset: -2px;
				}
				a {
					img {
						display: block;
					}
				}
			}
		}
		
		> aside {
			> div {
				> span {
					display: inline-block;
					font-size: 2em;
					border: calc(var(--gap) / 5) solid var(--fontcolor);
					padding: calc(var(--gap) / 4);
					border-radius: 100vw;
					margin-block: var(--gap);
				}
				> s {
					font-size: 1.5em;
					display: inline-block;
					color: #888;
					text-decoration: line-through;
				}
				> small {
					display: flex;
					align-content: flex-end;
					align-items: flex-end;
					justify-content: flex-end;
				}
			}
			
			> section {
				margin-block: var(--gap);
			}
			
			h2, h3, h4, h5 {
				font-size: 1.2rem;	
			}
		}
	}
	
}

.package {
	
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-block: var(--gap);
	
	> * {
		border-radius: var(--gap);
		padding: var(--gap);
		overflow: clip;
		box-shadow: 0 0 5px 5px #ccc;
	}
}