#boxes {
	.wrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		position: relative;
	}

	.box {
		display: grid;
		gap: 20px;
		padding: 28px;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.07);
		transition: all 0.3s ease;

		&:hover {
			border-color: var(--border-hover);
		}

		part {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 12px;
			align-items: center;
		}

		.description {

		}

		&:nth-child(1) {
		    background: #122842;

		    i {
			    color: #fff;
			    background: #ffffff1a;    	
		    }

		    .label {
		    	color: var(--text);
		    }
		}

		&:nth-child(2) {
		    background: #200800;
		    background: linear-gradient(335deg, var( --e-global-color-a55e3fb ) 0%, #251625 100%);
		    i {
			    color: #E63946;
			    background: #451D2C;		
			    border: 1px solid;    	
		    }

		    .title {
		    	color: #f4ede2;
		    }

		    .label {
		    	color: #D0636C;
		    }
		}

		i {
			width: 57px;
		    height: 57px;
		    border-radius: 8px;
		    display: flex;
		    font-size: 32px;
		    align-items: center;
		    justify-content: center;
		    background: rgb(11, 24, 42);
		    color: var(--primary);
		    border: 1px solid rgba(255, 255, 255, 0.07);
		}

		.label {
			font-size: 14px;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 1px;
			color: var(--light);
		}

		.title {
			font-size: 28px;
			font-weight: 400;
			line-height: 1.3;
			letter-spacing: 0.5px;
		}
	}

	@media (max-width: 768px) {
		.wrap {
			grid-template-columns: 1fr;
			gap: 20px;
		}

		.box {
			padding: 24px;

			.icon {
				width: 48px;
				height: 48px;
			}

			.title {
				font-size: 22px;
			}

			.description {
				font-size: 14px;
			}
		}
	}
}