.cc__espots .cc__section { margin: 1.25rem 0 0 0 } .cc__espots .row1-col1 { margin: 1rem 1rem 1rem 0; flex: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 32px } .cc__espots .row2-col2 { margin: 1rem 0 1rem 1rem; flex: 1 } .cc__espots .row2-col2 .cc__espot_description { margin: .5rem auto; width: 80%; height: 40px; color: #000 } .cc__espot { background: url(https://p2-ofp.static.pub/ShareResource/segment/education/homepage/2023/image/find-solution-background.jpg) bottom no-repeat; background-size: cover; border-radius: 6px; display: flex; flex-direction: column; position: relative } .cc__espot:hover { background: url(https://p4-ofp.static.pub/ShareResource/segment/education/homepage/2023/image/find-solution-background-active.png) no-repeat; background-size: cover } .cc__espot_image { position: relative; text-align: center; height: 200px; position: absolute; text-align: center; height: 215px; width: 100%; top: -30px; z-index: 1 } .cc__espot_image img { height: 100% } .cc__espot_backgournd { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1 } .cc__espot_backgournd img { display: block; width: 100% } .cc__espot_content { background: #fff; margin: 0 10px 12px; border-radius: 6px; padding: 1.25rem; text-align: center } .cc__espots .row1-col1 .cc__espot_content { margin-top: 185px } .cc__espot_content.without_bg { background: transparent  !important; margin-bottom: 80px; padding-top: 0 } .cc__espot_title { width: 100%; height: 34px; line-height: 34px; font-size: 22px; font-weight: 700; overflow: hidden } .cc__espot_description { margin: .5rem 0 .25rem; width: 100%; height: 60px; line-height: 20px; font-size: 1rem; color: #555; opacity: .8; overflow: hidden } .cc__espot_cta { display: flex; flex-direction: column; align-items: center } .cc__espot_link { background-color: #fff; margin-top: 12px; border-radius: 4px; border: 1px solid #294e95; padding: 1rem; width: 200px; white-space: nowrap; text-decoration: none; color: #294e95; font-weight: 700 } .cc__espot_link.dark { background: #294e95; color: #fff } .cc__espot_link:hover { background: #eaeef5; border-color: #294e95 } .cc__espot_link.dark:hover { background: #eaeef5; color: #294e95; border-color: #294e95 } .cc__espot_products { background: url(https://p3-ofp.static.pub/ShareResource/segment/education/homepage/2023/icon/find-solution-burst.svg) center no-repeat; padding: 24px 0; width: 100%; height: 325px; box-sizing: border-box; position: relative; overflow: hidden } .cc__espot:hover .cc__espot_image { transform: scale(1.05); transform-origin: bottom } .cc__espot:hover .cc__espot_content { background: rgba(255, 255, 255, .8) } .cc__espot_product { margin: auto; width: 30%; transition: .8s; opacity: 0; margin: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0 } .cc__espot_product .cc__image { margin: 0 auto; width: 90%; text-align: center } .cc__espot_product.img-0 { transform: translateX(-50%) scale(0.6); z-index: 9; opacity: .9 } .cc__espot_product.img-1 { transform: translateX(10%) scale(0.7); z-index: 9; opacity: .9 } .cc__espot_product.img-2 { transform: translateX(115%); z-index: 10; opacity: 1 } .cc__espot_product.img-3 { transform: translateX(210%) scale(0.7); z-index: 9; opacity: .9 } .cc__espot_product.img-4 { transform: translateX(280%) scale(0.6); z-index: 9; opacity: .9 }