/* ===================================================================== * szulerzy-fix.css * Override po main.css. Cel: poprawiona sekcja MEDIA — wideo nr 1 siedzi * w "ekranie" telewizora (skaluje sie razem z grafika), pozostale dwa * w siatce 1x2 ponizej. * Wgrac do: /css/szulerzy-fix.css * Link w ma byc PO main.css. * ===================================================================== */ /* --- usuniecie TV z tla sekcji #media (przenosi sie do .tv-frame) --- */ #media { background-image: none !important; background-color: #1f063d; padding: 8rem 0 12rem; } /* --- ramka telewizora (pierwsze wideo) --- */ .tv-frame { position: relative; display: block; margin: 0 auto; max-width: 1100px; /* desktop grafika: 1454 x 774 px */ aspect-ratio: 1454 / 774; background-image: url(../images/media-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ekran w grafice desktop: x 26-69%, y 15-75% (skalibrowane) */ .tv-frame .tv-screen { position: absolute; left: 26%; top: 15%; width: 43%; height: 60%; border: 0; background: #000; /* przed zaladowaniem YT */ } /* --- mniejsze wideo (2 i 3) obok siebie --- */ .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 6rem auto 0; max-width: 1100px; } .media-grid .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 0; } .media-grid .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* --- breakpoint: mobile / tablet --- */ @media only screen and (max-width: 1200px) { .tv-frame { /* mobilna grafika: 905 x 774 px */ aspect-ratio: 905 / 774; background-image: url(../images/media-bg-mob.jpg); max-width: 100%; } /* ekran w grafice mobile: x 9-74%, y 12-78% (skalibrowane) */ .tv-frame .tv-screen { left: 9%; top: 12%; width: 65%; height: 66%; } } @media only screen and (max-width: 768px) { .media-grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; } #media { padding: 5rem 0 8rem; } /* na telefonie: glowne wideo na pelna szerokosc, grafika telewizora schowana (klient: w telewizorze najnowszy klip, ma byc duzy nawet kosztem grafiki) */ .tv-frame { aspect-ratio: 16 / 9; background-image: none; max-width: 100%; } .tv-frame .tv-screen { left: 0; top: 0; width: 100%; height: 100%; } }