* { color: #fff; font-family: sans-serif; }
html { height: 100%; }
body { padding: 0; margin: 0; background: #000; }
iframe { width: 100%; border: none; overflow: hidden; background: none; }

.bg { background: linear-gradient(170deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), radial-gradient(rgba(218, 33, 40, 1) 50%, rgba(218, 33, 40, 0) 100%), linear-gradient(#7f1e20 0%, #7f1e20 100%); width: 100%; height: 100vh; position: fixed; z-index: -1; }
.hero { width: 100%; height: 80vh; margin-bottom: 30vh; display: flex; position: relative; justify-content: center; align-items: flex-end; background: url('hero.png') no-repeat center top; background-size: contain; }
.hero .col-nagrade { width: 50%; position: relative; }

.packshots { position: absolute; }
.packshots img:first-child { position: absolute; width: calc(1420vh / 34); height: auto; bottom: 30vh; right: 29vh; }
.packshots img:last-child { position: absolute; width: calc(1580vh / 38); height: auto; bottom: 36vh; left: 24vh; }

.nagrada h3 { font-size: 3vh; }
.nagrada h3 span { display: block; }

.nagrada-paket img { position: absolute; bottom: -17vh; right: 26vh; width: 42vh; height: auto; }
.nagrada-paket h3 { position: absolute; bottom: 18vh; right: 45vh; }

.nagrada-iphone img { position: absolute; bottom: -14vh; right: 11vh; width: 12vh; height: auto; filter: drop-shadow(5px 9px 9px rgba(0,0,0,.5)); }
.nagrada-iphone h3 { position: absolute; bottom: 1vh; right: 14vh; width: 18vh; text-align: right; }

.nagrada-vespa img { position: absolute; bottom: -25vh; left: -8vh; width: 50vh; height: auto; }
.nagrada-vespa h3 { position: absolute; bottom: 11vh; left: 29vh; }

.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; }

.studenac { position: fixed; right: 20px; bottom: 0; }

.pravila-hero { display: flex; gap: 20px; width: 90%; max-width: 700px; margin: 0 auto; padding-top: 30px; }
.pravila-hero img { width: 178px; height: 195px; }
.pravila .intro { text-align: left; padding-bottom: 30px; }

@media screen and (min-aspect-ratio: 220/127) {

	.packshots img:first-child { position: absolute; width: calc(1420vh / 25); height: auto; bottom: 25vh; right: 29vh; }
	.packshots img:last-child { position: absolute; width: calc(1580vh / 30); height: auto; bottom: 33vh; left: 24vh; }
}

@media screen and (max-aspect-ratio: 181/127) {

	.hero { background: url('hero.png') no-repeat center 15vh; background-size: 60vh; height: 100vh; margin-bottom: 0; overflow: hidden; padding-bottom: 6vh; }
	.hero .col-nagrade { width: 100%; height: 100vh; }

	.packshots { top: 0; left: 50%; transform: translateX(-50%); }
	.packshots img:first-child { width: calc(1420vh / 38); bottom: auto; right: -5vh; }
	.packshots img:last-child { width: calc(1580vh / 46); bottom: auto; left: -3vh; }

	.nagrada h3 { font-size: clamp(14px, 2vh, 20px); }
	.nagrada h3 span { display: block; }

	.nagrada-paket img { bottom: auto; top: 41vh; right: auto; left: 7vh; width: 28vh; }
	.nagrada-paket h3 { bottom: auto; top: 36vh; right: auto; left: 10vh; }

	.nagrada-iphone img { bottom: auto; top: 68vh; right: auto; left: 10vh; width: 11vh; }
	.nagrada-iphone h3 { bottom: auto; top: 72vh; right: auto; left: 23vh; text-align: left; width: 12vh; }

	.nagrada-vespa img { bottom: auto; top: 56vh; left: auto; right: 6vh; width: 49vh; }
	.nagrada-vespa h3 { bottom: auto; top: 43vh; left: auto; right: 10vh; text-align: right; }

	.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; }

	.studenac { right: auto; left: 20px; width: 70px; height: 70px; }
}

@media screen and (max-aspect-ratio: 140/127) {

	.hero { background: url('hero.png') no-repeat center 12vh; background-size: 50vh; height: 100vh; margin-bottom: 0; overflow: hidden; padding-bottom: 6vh; }

	.packshots img:first-child { width: calc(1420vh / 46); bottom: auto; right: -4vh; }
	.packshots img:last-child { width: calc(1580vh / 57); bottom: auto; left: -2vh; }

	.nagrada-paket img { left: 0; }
	.nagrada-paket h3 { left: 3vh; }

	.nagrada-iphone img { left: 3vh; }
	.nagrada-iphone h3 { left: 16vh; }

	.nagrada-vespa img { right: -1vh; }
	.nagrada-vespa h3 { right: 3vh; }

	.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; }

	.studenac { right: auto; left: 20px; width: 70px; height: 70px; }
}

@media screen and (max-aspect-ratio: 163/127) and (max-width: 600px) {

	.hero { background: url('hero.png') no-repeat center 12vh; background-size: 75%; padding-bottom: 0; }

	.packshots { top: 0; left: 50%; transform: translateX(-50%); }
	.packshots img:first-child { width: calc(1420vh / 46); bottom: auto; right: -4vh; }
	.packshots img:last-child { width: calc(1580vh / 58); bottom: auto; left: -2vh; }

	.nagrada h3 { font-size: clamp(14px, 2vh, 20px); }
	.nagrada h3 span { display: block; }

	.nagrada-paket img { bottom: auto; top: 41vh; right: auto; left: 0; width: 50vw; }
	.nagrada-paket h3 { bottom: auto; top: 36vh; right: auto; left: 3vh; }

	.nagrada-iphone img { bottom: auto; top: 66vh; right: auto; left: 3vh; width: 18vw; }
	.nagrada-iphone h3 { bottom: auto; top: 66vh; right: auto; left: 14vh; text-align: left; }

	.nagrada-vespa img { bottom: auto; top: 62vh; left: auto; right: -1vh; width: 67vw; }
	.nagrada-vespa h3 { bottom: auto; top: 48vh; left: auto; right: 3vh; text-align: right; }

	.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; padding-bottom: 15vh; }
}