:root {
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Quicksand", "Vazirmatn", sans-serif;
    background:
        radial-gradient(circle at 20% 0%,
            rgba(226, 194, 105, 0.18),
            transparent 24%),
        linear-gradient(180deg, #fffdf7 0%, #f7f0df 100%);
}

*{
    font-family: "Quicksand", "Vazirmatn", sans-serif;
}

button{
    cursor: pointer !important;
}

.text-balance {
    text-wrap: balance;
}

.glass {
    backdrop-filter: blur(14px);
    background: rgba(255, 250, 241, 0.78);
}

.mobile-drawer[hidden] {
    display: none;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
    cursor: pointer;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    cursor: not-allowed;
}

.grid-images {
    display: grid;
}

/* xs breakpoint: 480px and up */
@media (min-width: 280px) {
    .grid-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* sm breakpoint: 640px and up */
@media (min-width: 640px) {
    .grid-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* md breakpoint: 768px and up */
@media (min-width: 768px) {
    .grid-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* lg breakpoint: 1024px and up */
@media (min-width: 1024px) {
    .grid-images {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}