[data-cattype="234"] li.has-link{ cursor: pointer; overflow: hidden; } [data-cattype="234"] .list-360 li.has-link{ background-size: 100% auto; transition: background-size 0.5s ease, transform 0.35s ease; } [data-cattype="234"] .list-360 li.has-link::before{ content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.18); transition: background 0.35s ease; z-index: 0; } [data-cattype="234"] .list-360 li.has-link h4{ position: relative; z-index: 1; transition: transform 0.35s ease; } [data-cattype="234"] .list-360 li.has-link:hover{ background-size: 110% auto; } [data-cattype="234"] .list-360 li.has-link:hover::before{ background: rgba(0,0,0,0.28); } [data-cattype="234"] .list-360 li.has-link:hover h4{ transform: scale(1.03); } section[data-cattype="234"]{ padding-bottom: 0; z-index: 10; } [data-cattype="234"] li.has-link{ cursor: pointer; } [data-cattype="234"] > .vertical-divider{ border-left: 2px solid #f8920a; height: 84px; position: absolute; left: 50%; margin-left: -1px; top: -30px; content: ""; z-index: 10; } [data-cattype="234"] > .grey-bg{ position: absolute; content: ""; height: 45vh; width: 100%; background-color: transparent; top: 0; left: 0; z-index: 0; } [data-cattype="234"] > div.container{ z-index: 5; position: relative; width: 1450px; max-width: 100%; padding: 0; } [data-cattype="234"] .list-360{ display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 0px; justify-content: center; } [data-cattype="234"] .list-360 li{ width: 100%; height: 300px; background-color: #eee; padding: 25px 60px; text-align: center; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-size: cover; background-repeat: no-repeat; background-position: center center; } [data-cattype="234"] .list-360 li::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } [data-cattype="234"] .list-360 li h4{ font-size: 28px; z-index: 1; position: relative; color: #fff; text-shadow: 0 0 3px #000 ; font-weight: 300; line-height: 1.25; } [data-cattype="234"] .list-360 li.heading{ background-color: transparent; text-align: right; align-self: end; height: auto; justify-content: flex-end; padding-right: 30px; } [data-cattype="234"] .list-360 li.heading h2{ margin-top: 0px; color: #000; } [data-cattype="234"] .list-360 li.heading img{ height: 100px; display: block; } [data-cattype="234"] .list-360 li:last-child{ grid-column-start: 2; grid-column-end: 3; } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 768px) { [data-cattype="234"] .list-360 li { background-size: cover !important; } } @media (max-width: 480px) { [data-cattype="234"] > .grey-bg{ height: 60vh; } [data-cattype="234"] .list-360{ display: flex; flex-wrap: wrap; } [data-cattype="234"] .list-360 li{ width: 50%; height: 50vw; padding: 10px 15px; } [data-cattype="234"] .list-360 li h4{ font-size: 20px; } [data-cattype="234"] .list-360 li.heading{ width: 100%; justify-content: center; padding: 60px 20px 30px 20px; } [data-cattype="234"] .list-360 li.heading .header-image{ width: 200px; margin-left: 36px; } [data-cattype="234"] .list-360 li.heading h2{ font-size: 1.8em; text-align: center; } }