section[data-cattype="605"].wrapper_middle { padding: 120px; height: 100vh; margin-top: -80px; } [data-cattype="605"] .container-width{ position: relative; } [data-cattype="605"] h2 { font-size: 3.4em; color: #fb9202; text-align: left; } [data-cattype="605"] .bg-image{ background-position: center; background-repeat: no-repeat; background-size: cover; } [data-cattype="605"] ul.video-grid li { list-style: none; position: absolute; border-radius: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; overflow: hidden; } [data-cattype="605"] ul.video-grid li:nth-child(1) { width: 900px; height: 450px; left: 10%; bottom: 7%; } [data-cattype="605"] ul.video-grid li:nth-child(2) { width: 500px; height: 300px; right: 0%; top: 43%; bottom: 16%; } [data-cattype="605"] ul.video-grid li:nth-child(3) { width: 400px; height: 250px; left: 43%; top: 10%; } [data-cattype="605"] ul.video-grid li:nth-child(4) { width: 600px; height: 350px; left: 0; top: 4%; } [data-cattype="605"] .overlay { background-color: #00000040; width: 100%; height: 100%; position: absolute; transition: 0.3s; } [data-cattype="605"] ul.video-grid li:hover .overlay { background-color: #000000bd; transition: 0.3s; } [data-cattype="605"] .content{ color: #fff; z-index: 1; } [data-cattype="605"] h4{ font-size: 18px; font-weight: normal; color: #fff; } [data-cattype="605"] .content .fa { font-size: 40px; font-weight: normal; color: #fff; } [data-cattype="605"] .video-grid { position: relative; height: 100vh; width: 100%; } @media (min-width: 1350px) and (max-width: 1750px) { section[data-cattype="605"].wrapper_middle { margin-top: -60px; } [data-cattype="605"] ul.video-grid li:nth-child(1) { bottom: 25%; width: 560px; height: 250px; left: 13%; } [data-cattype="605"] ul.video-grid li:nth-child(2) { width: 300px; height: 175px; right: 5%; bottom: 39%; top: 33%; } [data-cattype="605"] ul.video-grid li:nth-child(3) { width: 300px; height: 150px; left: 45%; top: 5%; } [data-cattype="605"] ul.video-grid li:nth-child(4) { width: 400px; height: 200px; left: 0; top: 1%; } } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 767px) { } @media (max-width: 480px) { section[data-cattype="605"].wrapper_middle { padding: 60px 10px 0px 10px; height: auto; } [data-cattype="605"] ul.video-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 0 !important; } [data-cattype="605"] ul.video-grid li { width: 47% !important; margin: 10px !important; text-align: center; border: 1px solid #ccc; list-style: none; border-radius: 10px; position: relative; height: 145px !important; left: auto !important; right: auto !important; margin: 5px !important; top: 0 !important; } [data-cattype="605"] .video-grid { position: relative; height: auto; width: 100%; } [data-cattype="605"] h2 { font-size: 30px; text-align: center; } iframe { height: 300px; } }