.artworks-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 8px;
	row-gap: 16px;
}

.artwork-tile {
	grid-column: span 6; /* 2 per row by default */
}

.artworks-container .artwork-tile:nth-child(5n):not(:nth-child(6n)) {
	grid-column: span 12; /* every 5th tile spans entire container */
}

.artist-page-artworks-container .artwork-tile:only-child {
	grid-column: span 12;
}

.artwork-statistics-container > :nth-child(3):last-child {
	grid-column: 1 / -1; /* Center third and last statistic card on mobile */
	justify-self: center;
	min-width: 220px;
}

.favorites-artworks-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 8px;
	row-gap: 16px;
}

.artist-page-artworks-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 8px;
	row-gap: 16px;
	padding: 16px 0 40px 0;
}

.discover-artworks-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 8px;
	row-gap: 16px;
}

.artwork-image:active {
	transform: scale(0.975);
}

.account-artwork-tile {
	grid-column: span 6; /* 2 per row by default */
	aspect-ratio: 3 / 4;
}

.account-artwork-tile-information {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 8px 4px;
}

.management-artwork-tile {
	grid-column: span 6; /* 2 per row by default */
}

.management-artwork-tile-information {
	padding: 8px 4px 0 4px;
}

.management-artwork-tile-information > div {
	display: flex;
	gap: 8px;
	align-items: center;
}

.artwork-unavailable {
	opacity: 0.35;
}

.artwork-image {
	aspect-ratio: 3 / 4;
}

.artwork-image-add {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: var(--color-background-2-default);
}

.artwork-image-add:active {
	transform: scale(0.975);
}

.artwork-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: block;
}

.artwork-image-add img {
	width: 32px;
	height: 32px;
	opacity: 0.7;
}

.artwork-tile-information {
	flex: 1;
	overflow: hidden;
}

.artwork-tile-primary-information,
.artwork-tile-secondary-information {
	letter-spacing: unset;
}

.artwork-tile-primary-information {
	font: var(--font-m-bold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.artwork-tile-secondary-information {
	font: var(--font-s-regular);
	color: var(--color-text-2-default);
}

.heart {
	height: 24px;
	width: 24px;
	transform-origin: center;
}

.artwork-tile .heart:active {
	transform: scale(0.975);
}

.artwork-content-container .heart:active {
	transform: scale(0.975);
}

.carousel-container {
	width: 100%;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

.carousel-image-container {
	flex: 0 0 100%;
	scroll-snap-align: center;
	aspect-ratio: 3 / 4;
	height: 100%;
}

.carousel-image-container img {
	aspect-ratio: 3 / 4;
	width: 100%;
}

.previous-button, .next-button {
	display: none; /* only show on desktop */
}

.carousel-indicator-container {
	display: flex;
	padding-top: 6px;
	gap: 8px;
}

.position-indicator {
	flex: 1;
	cursor: pointer;
	height: 10px;
	display: inline-block;
	border-top: 4px solid var(--color-stroke-1-default);
}

.position-indicator-active {
	border-top: 4px solid var(--color-stroke-1-strong);
}

.upload-image-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4,4 pattern */
	gap: 8px;
}

.upload-image-tile {
	cursor: pointer;
	display: flex;
	justify-content: center;
	aspect-ratio: 3 / 4;
	grid-column: span 1;
	position: relative;
	overflow: hidden;
}

.upload-image-tile img {
	width: 100%;
}

.artwork-content-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 64px;
	padding: 40px 0;
}

.price-details {
	font-size: 1.4rem;
}

.additional-price-details {
	font-size: 0.8rem;
}

.dimension-details-primary {
	font: var(--font-m-bold);
	font-variant-numeric: tabular-nums;
}

.dimension-details-secondary {
	font: var(--font-s-regular);
	color: var(--color-text-2-default);
	font-variant-numeric: tabular-nums;
}

.about-section {
	padding: 40px 0;
	gap: 40px;
	flex-direction: column-reverse;
}

.about-artwork {
	display: flex;
	flex-direction: column;
	font: var(--font-l-regular);
	gap: 8px;
}

.about-artist {
	background-color: var(--color-background-3-default);
	display: flex;
	gap: 16px;
	padding: 24px;
	align-items: center;
}

.about-artist:active {
	background-color: var(--color-background-3-pressed);
}

.about-artist img {
	height: 60px;
	width: 60px;
}

.about-artist div {
	flex: 1;
}

.accordion-tile {
	padding: 8px 0;
	display: flex;
	flex-direction: column;
}

.accordion-tile > summary {
	display: flex;
	justify-content: space-between;
	font: var(--font-s-bold);
	text-transform: uppercase;
	cursor: pointer;
}

.accordion-tile img {
	width: 16px;
	transition: transform 200ms ease;
	height: 16px;
	align-self: center;
}

.accordion-tile-description {
	display: none;
	padding-top: 8px;
	font: var(--font-s-regular);
}

.accordion-tile[open] .accordion-tile-description {
	display: block;
}

.accordion-tile[open] img {
	transform: rotate(90deg);
}

.dimension-details-secondary span {
	font-variant: diagonal-fractions;
}

.price-tile {
	background-color: var(--color-background-2-default);
	border: 1px solid transparent;
	display: flex;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	font: var(--font-m-bold);
	padding: 8px 16px;
	font-variant-numeric: tabular-nums;
}

.price-tile:active {
	border: 1px solid var(--color-stroke-1-default);
}

.price-tile-selected {
	border: 1px solid var(--color-stroke-1-strong);
}

.artwork-summary {
	display: flex;
	gap: 16px;
	padding: 16px;
	background-color: var(--color-background-2-default);
	text-align: left;
}

.artwork-summary a {
	display: flex;
}

.artwork-summary-status {
	border: 1px solid var(--color-stroke-1-light);
	padding: 16px;
	gap: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	font: var(--font-s-regular);
}

.artwork-summary-status a {
	display: none;
}

.artwork-summary-status > .button-primary,
.artwork-summary-status > .button-secondary {
	flex: 1;
}

.artwork-summary > div {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	flex: 1;
	gap: 32px;
}

.artwork-summary img {
	height: 150px;
	aspect-ratio: 3 / 4;
}

.artwork-summary a:active {
	transform: scale(0.975);
}

.artwork-summary.unavailable img {
	opacity: 0.3;
}

.artwork-summary.unavailable {
	color: var(--color-text-1-inactive);
	border-left: 4px solid var(--color-feedback-danger-strong);
}

.sales-ordered-artwork-summary-card {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	background: var(--color-background-1-inactive);
	border: solid var(--color-stroke-1-light);
	border-width: 0 1px 1px 1px;
	padding: 16px;
	gap: 32px;
}

.sales-ordered-artwork-summary-card > div {
	flex: 1 1 auto;
	align-content: center;
}

.sales-ordered-artwork-summary-card img {
	width: 100%;
	aspect-ratio: 3 / 4;
}

.sales-ordered-artwork-summary-card a:active {
	transform: scale(0.975);
}

.sales-ordered-artwork-summary-card-information {
	font-variant-numeric: tabular-nums;
}

.sales-ordered-artwork-summary-card-information > div {
	border-bottom: 1px solid var(--color-stroke-1-default);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.sales-ordered-artwork-summary-card-information > div:last-child {
	border-bottom: none;
}

.sales-ordered-artwork-summary-card-information-title {
	color: var(--color-text-2-default);
	font: var(--font-s-bold);
	padding: 8px 0;
}

.sales-ordered-artwork-summary-card-information-title .icon-information-gray {
	width: 16px;
	height: 16px;
}

.sales-ordered-artwork-summary-card-information-title:active .icon-information-gray {
	transform: scale(0.925);
}

.sales-ordered-artwork-summary-card-information-value {
	font: var(--font-s-regular);
	color: var(--color-text-1-default);
	padding: 8px 0;
}

.sales-ordered-artwork-summary-card-information > div:first-child .sales-ordered-artwork-summary-card-information-value {
	font: var(--font-s-bold);
}

.management-ordered-artwork-summary-card {
	display: flex;
	flex-direction: column;
	align-content: center;
	background: var(--color-background-2-default);
	padding: 12px 16px;
	gap: 32px;
}

.management-ordered-artwork-summary-card > div {
	flex: 1 1 auto;
	align-content: center;
}

.management-ordered-artwork-summary-card img {
	width: 100%;
	aspect-ratio: 3 / 4;
}

.management-ordered-artwork-summary-card a:active {
	transform: scale(0.975);
}

.ordered-artwork-summary-card {
	display: flex;
	flex-direction: column;
	align-content: center;
	background: var(--color-background-2-default);
	padding: 12px 16px;
	gap: 16px;
}

.ordered-artwork-summary-badge {
	display: none;
}


.ordered-artwork-summary-card > div {
	flex: 1 1 auto;
	align-content: center;
}

.ordered-artwork-summary-card img {
	width: 100%;
	aspect-ratio: 3 / 4;
}

.ordered-artwork-summary-card a:active {
	transform: scale(0.975);
}

.ordered-artwork-image-counter {
	position: absolute;
	bottom: 0;
	right: 0;
	justify-content: center;
	align-items: center;
	background-color: var(--color-background-4-default);
	color: var(--color-text-4-default);
	font: var(--font-s-bold);
	font-variant-numeric: tabular-nums;
	padding: 2px 4px;
}

.ordered-artwork-summary-card-information {
	font-variant-numeric: tabular-nums;
}

.ordered-artwork-summary-card-information > div {
	border-bottom: 1px solid var(--color-stroke-1-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.ordered-artwork-summary-card-information > div:last-child {
	border-bottom: none;
}

.ordered-artwork-summary-card-information-title {
	font: var(--font-m-bold);
	padding: 4px 0;
}

.ordered-artwork-summary-card-information-value {
	font: var(--font-m-regular);
	color: var(--color-text-2-default);
	padding: 4px 0;
}

.account-artwork-edit-heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 40px;
}

.primary-image-upload-container {
	display: flex;
	border: 1px solid var(--color-stroke-1-light);
}

.primary-image-upload-container.disabled {
	pointer-events: none;
	background: var(--color-background-1-inactive);
}

.primary-image-upload-container > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px;
	gap: 8px;
	flex: 1 1 0;
}

.primary-image-upload-container > div:first-child {
	border-right: 1px solid var(--color-stroke-1-light);
}

.select-custom-size-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.select-custom-size-x {
	display: none;
}

.artwork-status-message {
	padding: 8px 0 32px 0;
	font: var(--font-s-regular);
}

.artwork-statistics-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	width: 100%;
}

.artwork-price-tier-description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	padding: 8px 0 0 0;
}

.artwork-price-tier-description > div:first-child {
	font: var(--font-m-bold);
}

.artwork-price-tier-description > div:last-child {
	font: var(--font-s-regular);
}

.calculate-revenue-result {
	background: var(--color-feedback-success-light);
	padding: 16px;
}

.calculate-revenue-result > div {
	display: flex;
	justify-content: space-between;
}

.calculate-revenue-result > div:first-child {
	font: var(--font-s-regular);
	color: var(--color-text-2-default);
}

.calculate-revenue-result > div:last-child {
	font: var(--font-l-bold);
}

.artwork-artist-name {
	color: var(--color-text-1-default);
	font: var(--font-l-regular);
	padding-bottom: 8px;
	display: flex;
}

.artwork-artist-name:active {
	color: var(--color-text-1-pressed);
}

@keyframes fill-heart {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes unfill-heart {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media screen and (min-width: 600px) {
	.sales-ordered-artwork-summary-card {
		flex-direction: row;
		height: 272px;
	}

	.sales-ordered-artwork-summary-card img {
		width: auto;
		height: 100%;
	}

	.management-ordered-artwork-summary-card {
		flex-direction: row;
		height: 185px;
	}

	.management-ordered-artwork-summary-card img {
		width: auto;
		height: 100%;
	}

	.ordered-artwork-summary-card {
		flex-direction: row;
		height: 150px;
	}

	.ordered-artwork-summary-card img {
		width: auto;
		height: 100%;
	}

	.artworks-container {
		column-gap: 16px;
	}

	.favorites-artworks-container {
		column-gap: 16px;
	}

	.artist-page-artworks-container {
		column-gap: 16px;
		padding: 16px 0 80px 0;
	}

	.artist-page-artworks-container .artwork-tile:only-child {
		grid-column: span 4; /* as if 3 in row */
	}

	.artwork-tile {
		grid-column: span 4; /* 3 per row */
	}

	.artworks-container .artwork-tile {
		grid-column: span 4;
	}

	.artworks-container .artwork-tile:nth-child(5n):not(:nth-child(6n)) {
		grid-column: span 4; /* reset mobile */
	}

	.artworks-container .artwork-tile:nth-child(8n + 7),
	.artworks-container .artwork-tile:nth-child(8n) {
		grid-column: span 6; /* 3, 2 pattern */
	}

	.discover-artworks-container .artwork-tile {
		grid-column: span 6; /* 2 per row, since only 4 total displayed */
	}

	.account-artwork-tile {
		grid-column: span 4; /* 3 per row */
	}

	.management-artwork-tile {
		grid-column: span 4; /* 3 per row */
	}

	.artwork-statistics-container {
		grid-template-columns: repeat(3, 1fr);
	}

	.artwork-statistics-container > :nth-child(3):last-child {
		grid-column: span 1;
		min-width: 100%;
	}

	.artwork-summary-status a {
		display: flex;
	}
}

@media screen and (min-width: 860px) {
	.artwork-tile {
		grid-column: span 3; /* 4 per row */
	}

	.artworks-container .artwork-tile {
		grid-column: span 3;
	}

	.artworks-container .artwork-tile:nth-child(5n):not(:nth-child(6n)),
	.artworks-container .artwork-tile:nth-child(8n + 7),
	.artworks-container .artwork-tile:nth-child(8n) {
		grid-column: span 3; /* reset tablet, show 4 across */
	}

	.account-artwork-tile {
		grid-column: span 3; /* 4 per row */
	}

	.management-artwork-tile {
		grid-column: span 3; /* 4 per row */
	}

	.discover-artworks-container .artwork-tile {
		grid-column: span 3; /* all 4 in 1 row */
	}

	.artwork-tile-primary-information {
		font: var(--font-l-bold);
	}

	.artwork-tile-secondary-information {
		font: var(--font-m-medium);
	}

	.artwork-content-container {
		padding: 0;
	}

	.artwork-section {
		padding: 40px 0;
	}

	.previous-button, .next-button {
		display: flex;
		position: absolute;
		top: 40%;
		bottom: 40%;
		width: 120px;
		align-items: center;
		padding: 0 16px;
		cursor: pointer;
	}

	.previous-button {
		left: 0;
		justify-content: flex-start;
	}

	.next-button {
		right: 0;
		justify-content: flex-end;
	}

	.previous-button img, .next-button img {
		width: 32px;
		height: 32px;
	}

	.previous-button img:active,
	.next-button img:active {
		transform: scale(0.925);
	}

	.carousel-hide-button-override {
		display: none !important; /* conditionally hide carousel's previous and next button in javascript */
	}

	.about-section {
		padding: 80px 0;
		gap: 80px;
		flex-direction: row;
	}

	.about-artist {
		padding: 40px 64px;
	}

	.primary-image-upload-container > div {
		padding: 16px;
		gap: 16px;
	}

	.select-custom-size-container {
		flex-direction: row;
		gap: 0;
	}

	.select-custom-size-x {
		display: initial;
		height: 48px;
		padding: 16px 8px;
		align-self: end;
	}

	.select-custom-size-container > label {
		flex: 1 0 0;
	}

	.artwork-summary-status > .button-primary,
	.artwork-summary-status > .button-secondary {
		flex: 0;
	}

	.ordered-artwork-summary-badge {
		display: initial;
	}
}

@media screen and (min-width: 1000px) {
	.account-artwork-edit-heading {
		padding: 0;
	}
}