sizes

var (
	// FullWidth Full viewport width sizing for hero images and full-width banners.
	// Image scales to match the complete width of the browser window.
	FullWidth = Size("100vw")

	// HalfWidth Half viewport width sizing for two-column layouts and side-by-side content.
	// Image occupies exactly half the browser window width.
	HalfWidth = Size("50vw")

	// ThirdWidth One-third viewport width sizing for three-column layouts and grid systems.
	// Image takes up one-third of the browser window width.
	ThirdWidth = Size("33vw")

	// QuarterWidth Quarter viewport width sizing for four-column layouts and compact grids.
	// Image occupies one-fourth of the browser window width.
	QuarterWidth = Size("25vw")

	// Small Small fixed width suitable for thumbnails and compact image displays.
	// Common size for mobile-first designs and thumbnail galleries.
	Small = Size("320px")

	// Medium Medium fixed width for standard content images and article photos.
	// Balanced size for most content images in responsive designs.
	Medium = Size("640px")

	// Large Large fixed width for hero images and prominent visual content.
	// Suitable for desktop displays and high-impact imagery.
	Large = Size("1024px")

	// ExtraLarge Extra large fixed width for full-screen backgrounds and high-resolution displays.
	// Maximum size for wide desktop screens and 4K displays.
	ExtraLarge = Size("1920px")

	// MobileFullTabletHalf Full width on mobile devices, half width on tablets and desktop.
	// Common pattern for responsive content that stacks on mobile.
	MobileFullTabletHalf = Size("(max-width: 767px) 100vw, 50vw")

	// MobileFullDesktopThird Full width on mobile, one-third width on larger screens.
	// Ideal for three-column desktop layouts that stack on mobile.
	MobileFullDesktopThird = Size("(max-width: 767px) 100vw, 33vw")

	// ResponsiveHero Full width on mobile and tablet, fixed large size on desktop.
	// Perfect for hero images that need different behaviors per device.
	ResponsiveHero = Size("(max-width: 767px) 100vw, (max-width: 1023px) 100vw, 1200px")

	// ResponsiveContent Full width on mobile, half width on tablet, third width on desktop.
	// Standard responsive pattern for content images in flexible layouts.
	ResponsiveContent = Size("(max-width: 767px) 100vw, (max-width: 1023px) 50vw, 33vw")
)