/* Developers page | developers-hero */

.developers-hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: var(--window-inner-height);
}

.developers-hero .container {
  grid-column: span 12;
  display: flex;
}

.developers-hero__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto 0;
  width: 100%;
}

.developers-hero__left {
  max-width: min(625px, 43.403vw);
}

.developers-hero__left .text {
  margin-top: min(24px, 1.667vw);
  color: var(--Shark-Shark-600, #0A0B0D);
}

.developers-hero__left .default-button {
  margin-top: min(24px, 1.667vw);
  width: fit-content;
}

.developers-hero__right {
  width: min(474px, 32.917vw);
  border-radius: 16px;
  border: 1px solid var(--Shark-Shark-100, #E4E7E9);
  background: #fff;
  filter: drop-shadow(0px 16px 40px rgba(10, 11, 13, 0.30));
}

.developers-hero__right img {
  display: block;
  width: 100%;
}


/* Developers page | api */

.api {
  margin: 0 0 var(--default-section-margin) 0;
}

.api__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: min(20px, 1.389vw);
  max-width: min(994px, 69.028vw);
  margin: 0 auto;
}

.api__item {
  border-radius: 16px;
  background: var(--Shark-Shark-50, #EFF2F4);
  padding: min(23px, 1.597vw) min(40px, 2.778vw) min(40px, 2.778vw) min(40px, 2.778vw);
  grid-row: span 5;
  grid-column: span 1;
}

.api__item .editor p {
  color: var(--Shark-Shark-300, #8C8F90);
  margin-top: min(7px, 0.486vw);
}

.api__item .editor ul {
  margin-top: min(19px, 1.319vw);
}

.api__item .editor li {
  padding-left: min(28px, 1.944vw);
  font-weight: 600;
}

.api__item .editor li+li {
  margin-top: min(8px, 0.556vw);
}

.api__item .editor li:before {
  position: absolute;
  left: 0;
  top: min(3px, 0.208vw);
  width: min(16px, 1.111vw);
  height: auto;
  aspect-ratio: 1/1;
  background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iOCIgZmlsbD0iIzUxMkNDQyIvPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTgxMl83MTI2MikiPgo8cGF0aCBkPSJNMTEuMzM0NiA1LjVMNi43NTEzIDEwLjA4MzNMNC42Njc5NyA4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTgxMl83MTI2MiI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
}

.api__item .editor>*:first-child {
  margin-top: 0;
}

.api__item .default-button {
  margin-top: min(39px, 2.708vw);
  width: fit-content;
}


.api__item.-smaller {
  grid-row: span 1;
  padding: min(26px, 1.806vw) min(40px, 2.778vw) min(20px, 1.389vw) min(40px, 2.778vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.api__item .title {
	font-weight: 600;
}
.api__item.-coming-soon .title {
  color: var(--Shark-Shark-200, #B8BBBC);

}

.api__item.-coming-soon .coming-soon-label {
  font-size: min(12px, 0.833vw);
  text-transform: none;
  padding: min(7px, 0.486vw) min(9px, 0.625vw) min(5px, 0.347vw) min(8px, 0.556vw);
  margin-top: max(-6px, -0.417vw);
}

.api__item .label{
	color: var(--white);
	font-family: Rotunda,sans-serif;
	font-size: min(12px, 0.833vw);
	font-style: normal;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(24px, 1.389vw);
	padding: 0 min(8px, 0.556vw);
	width: fit-content;
	background-color: var(--secondary-jade);
	border-radius: 24px;
}

.api__item .label span{
	line-height: min(10px, 0.703vw);
}

@media screen and (max-width: 1100px) {
  
	/* Developers page | developers-hero */

	.developers-hero {
		display: block;
		min-height: auto;
		margin-bottom: var(--default-section-margin);
	}

	.developers-hero__wrapper {
		flex-direction: column;
		width: fit-content;
		margin: auto;
		align-items: flex-start;
	}

	.developers-hero__left {
		max-width: 100%;
		margin-bottom: 32px;
	}

	.developers-hero__left .text {
		margin-top: 14px;
	}

	.developers-hero__left .default-button {
		margin-top: 16px;
	}

	.developers-hero__right {
		max-width: 474px;
		width: 100%;
		margin: 0 auto;
		filter: drop-shadow(0px 11.072px 27.679px rgba(10, 11, 13, 0.30));
	}

	/* Developers page | api */

	.api {
		margin: var(--default-section-margin) 0;
	}

	.api__wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		max-width: 994px;
		margin: 0 auto;
	}

	.api__item {
		width: 100%;
		padding: 16px 16px 24px 16px;
	}

	.api__item .editor p {
		margin-top: 12px;
	}

	.api__item .editor ul {
		margin-top: 15px;
	}

	.api__item .editor li {
		padding-left: 28px;
	}

	.api__item .editor li+li {
		margin-top: 9px;
	}

	.api__item .editor li:before {
		top: 2px;
		width: 16px;
	}

	.api__item .default-button {
		margin-top: 22px;
	}


	.api__item.-smaller {
		padding: 18px 16px 16px 16px;
	}

	.api__item .label{
		font-size: 12px;
		height: 24px;
		padding: 0 8px;
	}

	.api__item .label span{
		line-height: 12px;
	}


	.api__item.-coming-soon .coming-soon-label {
		font-size: 12px;
		text-transform: none;
		padding: 7px 9px 5px 8px;
		margin-top: -2px;
	}
}