.new3card-container .youtube-card { display: block; grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 1080px; overflow: hidden; text-align: center; margin:12px 0; } .new3ytbox-header { width: 100%; display: flex; align-items: center; height: 40px; background-color: #B30000; border-left: 4px solid #FB0D1B; padding: 7px 0 7px 16px; font-size: 20px; line-height: 26px; margin-top: 0 !important; color: #FFFFFF; font-family: sans-serif; font-weight: 700; } .new3ytbox-header h2 { font-size: 20px !important; } .new3ytbox-container{ display: flex; justify-content: space-between; width: 100%; max-width: 1056px; gap: 24px; font-family: sans-serif; font-weight: 700; color:#FFFFFF; } .left-image { flex: 8; display: flex; justify-content: flex-start; align-items: flex-start; } .left-image img { max-width: 100%; height: auto; } .right-images { flex: 2.5; display: flex; flex-direction: column; justify-content: space-between; } .right-images img { max-width: 100%; height: auto; } .left-image a, .right-images { position: relative; display: flex; flex-wrap: wrap; align-items: end; height:auto; margin-top: 16px; gap: 16px; line-height:0; } .new3overlay-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: end; margin: 0; } .new3overlay-icon img { width: 100px; height: 100px; position:absolute; display:block; top: 50%; left: 50%; transform: translate(-50%, -50%); } .new3ytbox-bottom { max-width: 1056px; width: 100%; height: 10px; background-color: #B30000; border-left: 4px solid #FB0D1B; margin-top: 16px; } .new3ytbox-mobile{ display: none; } @media only screen and (max-width: 768px) { .new3ytbox-header { font-size: 16px; } .new3ytbox-container { flex-direction: column; } .left-image { flex: 1; display: flex; } .right-images { flex-direction: unset; display: flex; flex-wrap: nowrap; margin-top: 0; } .right-images img { flex: 1 1 50%; } .new3card-container .youtube-card{ margin:14px 0; } }