.module-component-contacts .tag {
    color: var(--blue-100);
    padding: var(--spacing-8) var(--spacing-30);
    border-radius: var(--radius-20);
    background: var(--blue-100-10);
    width: fit-content;
}

.module-component-contacts .card{
    background: var(--gradient-bg-overlay-2);
    border-radius: var(--radius-15);
    padding: calc(65 * var(--rpx)) calc(75 * var(--rpx));
    height: 100%;
}

.module-component-contacts .card.red{
    background: var(--gradient-bg-overlay-red);
}

.module-component-contacts .card p {
    color: var(--text-70);
    font: var(--font-p1);
}

.module-component-contacts .card .settings{
    font: var(--font-h3);
    color: var(--text);
}

.module-component-contacts .card .social .settings{
    text-decoration: underline;
}



@media (max-width: 1023px) {
    .module-component-contacts .main{
        gap: 30px;
        align-items: flex-start;
    }

    .module-component-contacts .top{
        align-items: flex-start;
        gap: 24px;
    }

    .module-component-contacts .grid > div:nth-child(4) {
        grid-row: 3;
    }

    .module-component-contacts .card{
        gap: 32px;
        padding: 28px;
        padding-bottom: 40px;
    }

    .module-component-contacts .card svg {
        max-width: 38px;
        height: auto;
        width: 38px;
    }

    .module-component-contacts .card .settings {
        font: var(--font-h5);
    }
}

@media (min-width: 1024px) {
	.module-component-contacts .grid .h-row:first-child {
		grid-column:span 2;
	}
}