#nos-packs{ .content{ margin-top: 0; width: 70%; margin: auto; .section{ .__intro{ text-align: center; color: $light-blue; margin: 100px 0; p{ font-family: $now_alt_bold; font-size: 1.2rem; } } .d-flex{ display: inline-flex; width: 100%; .__more{ display: none } .__thumbnails{ margin: 0 1rem; .__title{ text-align: center; p{ border-bottom: 3px solid #b5cb3a; width: max-content; margin: 0 auto 1rem auto; padding: 0 1.5rem 0.2rem 1.5rem; font-size: 1rem; font-family: $now_alt_medium; } } .__thumb{ position: relative; .__images{ width: 300px; height: 300px; position: relative; object-fit: cover; img{ width: 100%; height: 100%; } } } } } .dl_brochure{ width: 100%; margin: 100px 0; a{ font-size: 1.5rem; font-family: $now_alt_medium; display: block; text-align: center; text-transform: uppercase; color: $light-blue; } } &.nos_pack{ .__thumbnails{ .__thumb{ transition: 0.3s transform ease; &:hover{ transform: scale(1.015); transition: 0.3s transform ease, 0.3s box-shadow ease; .__images, .__btn{ box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); transition: 0.3s box-shadow ease; } } } .__images{ transition: 0.5s filter ease; filter: grayscale(0%); .__sub-title{ opacity: 0; position: absolute; top: 50%; left: 0; transform: translateY(-0%); text-align: center; color: white; padding: 1rem; transition: 0.5s transform ease, 1s opacity ease; p{ font-size: 1.2rem; font-family: $now_alt_medium; } } } .__btn{ color: white; display: block; padding: 0.7rem 0; margin-top: 1rem; font-size: 1rem; font-family: $now_alt_medium; text-align: center; &.__blue{ background: $light-blue; } &.__green{ background: $green; } &.__red{ background: $red; } &.__grey{ background: $grey; } } &:hover{ .__images{ img{ filter: grayscale(100%); transition: 0.5s filter ease; } .__sub-title{ opacity: 1; transform: translateY(-50%); transition: 0.5s transform ease, 1s opacity ease; } } } } } &:last-child{ margin-bottom: 100px; } } } }