.container {
	--default-color: oklab(from rgb(168, 168, 168) l a b);
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 3ch 1.1rem;
	margin: 6ch auto;
	max-width: 44ch;
	border: 0.4px solid oklab(from rgb(128, 126, 126) l a b);
	border-radius: 10px;
	> p {
		font-weight: 400;
		font-size: small;
		text-align: center;
		position: relative;
		margin: 0;

		&::after,
		&::before {
			position: absolute;
			top: 30%;
			right: 27%;
			display: inline-block;
			content: "";
			width: 0.5em;
			height: 0.5em;
			margin-right: 0.5em;
			background-color: #81e18c;
			border-radius: 50%;
			margin-bottom: 1px;
			animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
		}
	}
	> header {
		h1 {
			font-style: normal;
			font-weight: 700;
			font-size: x-large;
		}
		p {
			font-weight: 300;
			font-size: small;
			font-style: oblique;
		}
	}

	> form {
		display: flex;
		padding: 1ch 0;
		flex-direction: column;
		gap: 2ch;

		> input[type="file"] {
			outline: none;
			display: block;
			width: 100%;
			border: solid 1px var(--default-color);
			box-shadow: 0 1px 3px 0 var(--default-color);
			border-radius: 0.5rem;
			font-size: small;

			&:focus {
				z-index: 10;
				border: 1px solid oklab(from rgb(113, 113, 114) l a b);
			}
			&::file-selector-button {
				background: var(--default-color);
				margin-inline-end: 16px;
				padding: 12px 16px;
				border: none;
				color: beige;
				cursor: pointer;
				outline: inherit;
			}
		}
		> button {
			display: inline-flex;
			border: 1px solid var(--default-color);
			padding: 12px 16px;
			align-items: center;
			justify-content: center;
			gap: 8px;
			font-size: small;
			font-weight: 500;
			border-radius: 0.5rem;
			color: oklab(from grey l a b);
			background: transparent;
			&:hover,
			&:focus {
				border: solid 1px oklch(0.55 0.22 263);
				color: oklch(0.55 0.22 263);
			}
			&:focus {
				outline: hidden;
			}
		}
		&:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}

.images {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-items: center;
	max-width: 40ch;
	margin: 0 auto;
	/* border: 1px dashed red; */
	gap: 8px;

	> p {
		grid-column: span 3 / span 3;
		text-align: center;
		font-weight: 500;
		font-size: larger;
	}
	div {
		position: relative;

		img {
			height: 110px;
			width: 110px;
			object-fit: cover;
			border-radius: 0.5rem;
		}
		a {
			position: absolute;
			bottom: 0;
			left: 0;
		}
		> form {
			position: absolute;
			top: 0;
			right: 7%;

			> button {
				border: 1px solid oklch(0.44 0.16 27);
				/* padding: 1px 1px; */
				background-color: oklch(0.44 0.16 27);
				border-radius: 0.23rem;
				color: white;
			}
		}
	}
}

@keyframes ping {
	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@media (min-width: 450px) {
	.container {
		margin: 6ch auto;
	}

	.images {
		max-width: 60ch;

		div {
			img {
				height: 160px;
				width: 160px;
			}
		}
	}
}
