#big-espots { color: white; text-transform: uppercase; margin: 15px 0px 15px 4%; } #big-espots div{ width: 100%; padding: 5px 0; text-align: center; } #big-espots article { height: 150px; width: 40%; max-width: 90vw; display: inline-block; margin: 0 3px; position: relative; } #big-espots article:first-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/espot-01-1920.dd2a53fdc709cc53.jpg") center center no-repeat; background-size: cover; } #big-espots article:last-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/espot-02-1920.8276817ad7a8110f.jpg") center center no-repeat; background-size: cover; } #big-espots a { background: rgba(0, 0, 0, .5); display: block; width: 100%; height: 100%; } #big-espots article h2 { position: absolute; color: white; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 22px; font-weight: bold; text-align: center; width: 100%; padding: 0 10px; box-sizing: border-box; } #dots{ margin: auto; text-align: center; position: relative; top: -18px; } .dot{ width: 8px; height: 8px; display: inline-block; background: black; border-radius: 5px; margin: 0 10px 0 0; } #cta-banner { max-width: 90vw; background: #46c8e1; color: white; height: 115px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #cta-banner p { font-size: 18px; font-weight: bold; margin-top: 5px; margin: auto; } #cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; margin-bottom: auto; } } @media (min-width: 1180px) { #big-espots div { width: 90%; color: white; text-transform: uppercase; display: flex; justify-content: center; margin: 30px auto; } #big-espots article { height: 225px; width: 49%; max-width: 750px; position: relative; } #big-espots article:first-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/espot-01-1920.dd2a53fdc709cc53.jpg") center center no-repeat; background-size: cover; //margin-right: 20px; } #big-espots article:last-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/espot-02-1920.8276817ad7a8110f.jpg") center center no-repeat; background-size: cover; } #big-espots a { background: rgba(0, 0, 0, .5); display: block; width: 100%; height: 100%; } #big-espots article h2 { position: absolute; color: white; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: bold; text-align: center; width: 100%; padding: 0 10px; box-sizing: border-box; } } @media (max-width: 750px) { #big-espots div { width: 100%; } #big-espots { width: 95%; color: white; text-transform: uppercase; justify-content: center; margin: 30px auto; height: auto; } #big-espots div{ width: 100%; justify-content: center; } #big-espots article { height: 225px; width: 100%; max-width: auto; position: relative; margin: 0 auto; margin-bottom: 20px; } #big-espots article:first-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/espot-01-1920.dd2a53fdc709cc53.jpg") center center no-repeat; background-size: cover; margin-right: 1%; } #big-espots article:last-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/espot-02-1920.8276817ad7a8110f.jpg") center center no-repeat; background-size: cover; } #big-espots a { background: rgba(0, 0, 0, .5); display: block; width: 100%; height: 100%; } #big-espots article h2 { position: absolute; color: white; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; text-align: center; width: 100%; padding: 0 10px; box-sizing: border-box; } }