.grid{
	display:grid;
}

.aspect-\[4\/3\] {

    aspect-ratio: 4/3

}

.aspect-square {

    aspect-ratio: 1/1

}



.grid-cols-1 {

    grid-template-columns:repeat(1, minmax(0, 1fr))

}



.grid-cols-10 {

    grid-template-columns:repeat(10, minmax(0, 1fr))

}



.grid-cols-2 {

    grid-template-columns:repeat(2, minmax(0, 1fr))

}



.grid-cols-3 {

    grid-template-columns:repeat(3, minmax(0, 1fr))

}



.grid-cols-4 {

    grid-template-columns:repeat(4, minmax(0, 1fr))

}



.grid-cols-5 {

    grid-template-columns:repeat(5, minmax(0, 1fr))

}



.grid-cols-6 {

    grid-template-columns:repeat(6, minmax(0, 1fr))

}



.grid-cols-\[1fr\2c 1fr\2c 1fr\] {

    grid-template-columns:1fr 1fr 1fr

}



.grid-cols-\[1fr\2c 2rem\2c 1fr\2c 2rem\2c 1fr\] {

    grid-template-columns:1fr 2rem 1fr 2rem 1fr

}



.grid-cols-\[1fr\2c auto\2c 1fr\] {

    grid-template-columns:1fr auto 1fr

}



.grid-cols-\[1fr_500px_2fr\] {

    grid-template-columns:1fr 500px 2fr

}



.grid-cols-\[200px_minmax\(900px\2c _1fr\)_100px\] {

    grid-template-columns:200px minmax(900px, 1fr) 100px

}



.grid-cols-\[70px\2c repeat\(7\2c 150px\)\] {

    grid-template-columns:70px repeat(7, 150px)

}



.grid-cols-\[fit-content\(theme\(spacing\.32\)\)\] {

    grid-template-columns:fit-content(8rem)

}



.grid-cols-\[repeat\(2\2c 56px\)\] {

    grid-template-columns:repeat(2, 56px)

}



.grid-rows-2 {

    grid-template-rows:repeat(2, minmax(0, 1fr))

}



.grid-rows-3 {

    grid-template-rows:repeat(3, minmax(0, 1fr))

}



.grid-rows-4 {

    grid-template-rows:repeat(4, minmax(0, 1fr))

}



.grid-rows-6 {

    grid-template-rows:repeat(6, minmax(0, 1fr))

}



.grid-rows-\[1fr\2c 2fr\2c 1fr\] {

    grid-template-rows:1fr 2fr 1fr

}



.grid-rows-\[1fr\2c 3fr\2c 1fr\] {

    grid-template-rows:1fr 3fr 1fr

}



.grid-rows-\[200px_minmax\(900px\2c _1fr\)_100px\] {

    grid-template-rows:200px minmax(900px, 1fr) 100px

}



.grid-rows-\[4\.5rem_auto_min\(1fr\2c 4\.5rem\)\] {

    grid-template-rows:4.5rem auto min(1fr, 4.5rem)

}



.grid-rows-\[auto\2c repeat\(16\2c 50px\)\] {

    grid-template-rows:auto repeat(16, 50px)

}



.gap-4 {

    gap: 1rem

}



@media (min-width: 640px) {



    .sm\:grid-cols-10 {

        grid-template-columns:repeat(10, minmax(0, 1fr))

    }



    .sm\:grid-cols-2 {

        grid-template-columns:repeat(2, minmax(0, 1fr))

    }



    .sm\:grid-cols-3 {

        grid-template-columns:repeat(3, minmax(0, 1fr))

    }



    .sm\:grid-cols-4 {

        grid-template-columns:repeat(4, minmax(0, 1fr))

    }

}



@media (min-width: 768px) {



    .md\:grid-cols-2 {

        grid-template-columns:repeat(2, minmax(0, 1fr))

    }



    .md\:grid-cols-3 {

        grid-template-columns:repeat(3, minmax(0, 1fr))

    }



    .md\:grid-cols-4 {

        grid-template-columns:repeat(4, minmax(0, 1fr))

    }

}



@media (min-width: 1024px) {

    .lg\:grid-cols-1 {

        grid-template-columns:repeat(1, minmax(0, 1fr))

    }



    .lg\:grid-cols-12 {

        grid-template-columns:repeat(12, minmax(0, 1fr))

    }



    .lg\:grid-cols-2 {

        grid-template-columns:repeat(2, minmax(0, 1fr))

    }



    .lg\:grid-cols-3 {

        grid-template-columns:repeat(3, minmax(0, 1fr))

    }



    .lg\:grid-cols-4 {

        grid-template-columns:repeat(4, minmax(0, 1fr))

    }



    .lg\:grid-cols-5 {

        grid-template-columns:repeat(5, minmax(0, 1fr))

    }



    .lg\:grid-cols-6 {

        grid-template-columns:repeat(6, minmax(0, 1fr))

    }



    .lg\:grid-rows-1 {

        grid-template-rows:repeat(1, minmax(0, 1fr))

    }

}



@media (min-width: 1280px) {



    .xl\:grid-cols-10 {

        grid-template-columns:repeat(10, minmax(0, 1fr))

    }



    .xl\:grid-cols-2 {

        grid-template-columns:repeat(2, minmax(0, 1fr))

    }



    .xl\:grid-cols-3 {

        grid-template-columns:repeat(3, minmax(0, 1fr))

    }



    .xl\:grid-cols-6 {

        grid-template-columns:repeat(6, minmax(0, 1fr))

    }

}


