/* ==========================================================================
   .eg-top-hero
   ========================================================================== */
.eg-top-hero {
	position: relative;
	padding-block-start: 10px;
	padding-inline-start: 50px;
}

.eg-top-hero__copyright {
	position: absolute;
	bottom: 0;
	left: 20px;
	margin: 0;
	color: var(--eg-muted);
	font-family: var(--eg-font-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
	white-space: nowrap;
	opacity: 0.5;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.eg-top-hero__visual {
	position: relative;
	block-size: 500px;
	overflow: hidden;
	border-radius: 10px 0 0 10px;
}

.eg-top-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(32, 81, 99, 0.3), rgba(32, 81, 99, 0) 50%);
}

.eg-top-hero__image {
	position: absolute;
	inset-block-start: -5.2%;
	inset-inline-start: -0.11%;
	inline-size: 236.94%;
	max-inline-size: none;
	block-size: 108.4% !important;
	object-fit: cover;
}

.eg-top-hero__copy {
	position: absolute;
	inset-block-start: 33px;
	inset-inline-start: 25px;
	z-index: 1;
	display: grid;
	gap: 12px;
	color: #fff;
	font-family: var(--eg-font-head);
	font-weight: 500;
	filter: drop-shadow(5px 5px 10px rgba(33, 33, 33, 0.1));
}

.eg-top-hero__title {
	margin: 0;
	font-size: 30px;
	line-height: normal;
}

.eg-top-hero__text {
	margin: 0;
	font-size: 14px;
	line-height: calc(25 / 14);
}

@media (min-width: 768px) {
	.eg-top-hero {
		display: flex;
		align-items: flex-end;
		gap: 30px;
		padding-block-start: 2px;
		padding-inline-start: 38px;
	}

	.eg-top-hero__copyright {
		position: static;
		flex: none;
	}

	.eg-top-hero__visual {
		flex: 1;
		block-size: auto;
		aspect-ratio: 1360 / 600;
		border-radius: 20px 0 0 20px;
	}

	.eg-top-hero__visual::after {
		content: none;
	}

	.eg-top-hero__image {
		inset: 0;
		inline-size: 100%;
		block-size: 100% !important;
		object-position: center 80%;
	}

	.eg-top-hero__copy {
		inset-block-start: auto;
		inset-block-end: clamp(24px, calc(50 / 1440 * 100vw), 50px);
		inset-inline-start: clamp(30px, calc(60 / 1440 * 100vw), 60px);
		inset-inline-end: 30px;
		gap: 16px;
	}

	.eg-top-hero__title {
		font-size: clamp(28px, calc(40 / 1440 * 100vw), 40px);
	}

	.eg-top-hero__text {
		font-size: clamp(15px, calc(18 / 1440 * 100vw), 18px);
		line-height: 1.8;
	}
}

/* ==========================================================================
   .eg-top-banner
   ========================================================================== */
.eg-top-banner {
	padding-block-start: 30px;
}

.eg-top-banner__list {
	display: grid;
	gap: 20px;
}

.eg-top-banner__item {
	list-style: none;
}

.eg-top-banner__item img {
	inline-size: 100%;
	block-size: 100% !important;
	aspect-ratio: 580 / 200;
	object-fit: cover;
	transition: opacity 0.3s;
}

@media (any-hover: hover) {
	.eg-top-banner__link:hover img {
		opacity: 0.8;
	}
}

@media (min-width: 768px) {
	.eg-top-banner {
		padding-block-start: 60px;
	}

	.eg-top-banner__list {
		grid-template-columns: repeat(2, minmax(0, 580px));
		justify-content: center;
		gap: 40px;
	}
}

/* ==========================================================================
   .eg-top-exhibitions
   ========================================================================== */
.eg-top-exhibitions {
	padding-block: 40px;
}

.eg-top-exhibitions__inner {
	display: grid;
	justify-items: center;
	gap: 30px;
}

.eg-top-exhibitions__list {
	display: grid;
	gap: 30px;
	inline-size: 100%;
}

@media (min-width: 768px) {
	.eg-top-exhibitions {
		padding-block: 60px;
	}

	.eg-top-exhibitions__inner {
		gap: 40px;
	}

	.eg-top-exhibitions__list {
		grid-template-columns: repeat(2, minmax(0, 570px));
		justify-content: space-between;
		gap: 40px;
	}
}

/* ==========================================================================
   .eg-top-artists
   ========================================================================== */
.eg-top-artists {
	display: grid;
	gap: 30px;
	padding-block: 40px;
}

.eg-top-artists__intro {
	display: grid;
	gap: 20px;
}

html:not(.eg-js) .eg-top-artists__list {
	gap: 40px;
}

.eg-top-artists__list > .eg-artistCard {
	inline-size: 270px;
}

.eg-top-artists__more {
	display: grid;
	justify-items: center;
}

@media (min-width: 768px) {
	.eg-top-artists {
		gap: 40px;
		padding-block: 60px;
	}

	.eg-top-artists__slider .eg-slider__track {
		overflow: visible;
		padding-inline: 0;
	}

	.eg-top-artists__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 270px));
		gap: 40px;
		justify-content: space-between;
		inline-size: 100%;
		max-inline-size: calc(var(--eg-content) + 80px);
		margin-inline: auto;
		padding-inline: 40px;
	}

	.eg-top-artists__list > .eg-artistCard {
		inline-size: auto;
	}
}

/* ==========================================================================
   .eg-top-reports
   ========================================================================== */
.eg-top-reports {
	padding-block: 40px;
}

.eg-top-reports__inner {
	display: grid;
	gap: 30px;
}

.eg-top-reports__intro {
	display: grid;
	gap: 20px;
}

.eg-top-reports__list {
	display: grid;
	gap: 21px;
}

@media (min-width: 768px) {
	.eg-top-reports {
		padding-block: 60px;
	}

	.eg-top-reports__inner {
		gap: 40px;
	}

	.eg-top-reports__list {
		gap: 40px;
	}
}

/* ==========================================================================
   .eg-top-columns
   ========================================================================== */
.eg-top-columns {
	display: grid;
	gap: 30px;
	padding-block: 40px;
}

.eg-top-columns__intro {
	display: grid;
	gap: 20px;
}

.eg-top-columns__slider .eg-articleCard {
	inline-size: 320px;
}

.eg-top-columns__more {
	display: grid;
	justify-items: center;
}

@media (min-width: 768px) {
	.eg-top-columns {
		gap: 40px;
		padding-block: 60px;
	}
}

/* ==========================================================================
   .eg-top-greeting
   ========================================================================== */
.eg-top-greeting {
	padding-block: 40px;
}

.eg-top-greeting__inner {
	display: grid;
	justify-items: center;
	gap: 30px;
}

.eg-top-greeting__image {
	inline-size: 300px;
	aspect-ratio: 400 / 500;
	overflow: hidden;
}

.eg-top-greeting__image img {
	inline-size: 100%;
	block-size: 100% !important;
	object-fit: cover;
}

.eg-top-greeting__message {
	display: grid;
	gap: 20px;
	inline-size: 100%;
}

.eg-top-greeting__catch {
	margin: 0;
	color: var(--eg-ink);
	font-family: var(--eg-font-head);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.eg-top-greeting__body {
	color: var(--eg-ink);
	font-family: var(--eg-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}

.eg-top-greeting__body p {
	margin: 0;
}

.eg-top-greeting__body p + p {
	margin-block-start: 1.8em;
}

.eg-top-greeting__sign {
	display: grid;
	justify-items: end;
	gap: 10px;
	margin: 0;
	font-family: var(--eg-font-head);
	font-weight: 500;
	text-align: end;
}

.eg-top-greeting__role {
	color: var(--eg-muted);
	font-size: 14px;
	line-height: 14px;
}

.eg-top-greeting__name {
	color: var(--eg-ink);
	font-size: 22px;
	line-height: 22px;
}

.eg-top-greeting__actions {
	display: grid;
	justify-items: center;
	gap: 20px;
	inline-size: 100%;
}

@media (min-width: 768px) {
	.eg-top-greeting {
		padding-block: 60px;
	}

	.eg-top-greeting__inner {
		grid-template-columns: minmax(0, 400px) minmax(0, 700px);
		grid-template-areas:
			"image heading"
			"image message"
			"image actions";
		align-content: center;
		justify-content: space-between;
		justify-items: stretch;
		column-gap: 40px;
		row-gap: 30px;
	}

	.eg-top-greeting__heading {
		grid-area: heading;
		align-self: end;
		text-align: start;
	}

	.eg-top-greeting__image {
		grid-area: image;
		align-self: center;
		inline-size: 100%;
	}

	.eg-top-greeting__message {
		grid-area: message;
	}

	.eg-top-greeting__catch {
		color: var(--eg-black);
		font-size: 28px;
	}

	.eg-top-greeting__body {
		font-size: 16px;
	}

	.eg-top-greeting__actions {
		grid-area: actions;
		display: flex;
		justify-content: space-between;
		gap: 20px;
	}
}