.gp-hidden {
    display: none !important;
}

.gp-block {
    display: block;
}

.gp-flex {
    display: flex;
}

.gp-inline-flex {
    display: inline-flex;
}

.gp-items-center {
    align-items: center;
}

.gp-justify-between {
    justify-content: space-between;
}

.gp-gap-sm {
    gap: var(--gp-space-sm);
}

.gp-gap-md {
    gap: var(--gp-space-md);
}

.gp-gap-lg {
    gap: var(--gp-space-lg);
}

.gp-grid {
    display: grid;
    gap: var(--gp-space-md);
}

.gp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gp-space-md);
}

.gp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gp-space-md);
}

.gp-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gp-space-md);
}

.gp-text-left {
    text-align: left;
}

.gp-text-center {
    text-align: center;
}

.gp-text-right {
    text-align: right;
}

.gp-content-width {
    width: min(100%, var(--gp-layout-content-width));
    margin-inline: auto;
}

.gp-wide-width {
    width: min(100%, var(--gp-layout-wide-width));
    margin-inline: auto;
}

.gp-surface-card {
    background: rgba(255, 250, 243, 0.76);
    border: 1px solid var(--gp-color-line);
    border-radius: var(--gp-layout-radius-md);
    box-shadow: var(--gp-layout-shadow-soft);
}

.gp-p-sm {
    padding: var(--gp-space-sm);
}

.gp-p-md {
    padding: var(--gp-space-md);
}

.gp-p-lg {
    padding: var(--gp-space-lg);
}

.gp-py-lg {
    padding-top: var(--gp-space-lg);
    padding-bottom: var(--gp-space-lg);
}

.gp-py-xl {
    padding-top: var(--gp-space-xl);
    padding-bottom: var(--gp-space-xl);
}

.gp-mx-auto {
    margin-inline: auto;
}

@media (max-width: 1024px) {
    .gp-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .gp-grid-3,
    .gp-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gp-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .gp-grid-2,
    .gp-grid-3,
    .gp-grid-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .gp-hide-mobile {
        display: none !important;
    }

    .gp-show-mobile {
        display: block !important;
    }
}