.image-grid{margin:0 auto;max-width:1200px;padding:0 15px}.image-grid .row{display:flex;flex-wrap:wrap;margin:-5px}.image-grid .col-4{box-sizing:border-box;flex:1 1 33.3333%;max-width:33.3333%;padding:5px}.image-container{margin-bottom:15px;overflow:hidden;position:relative}.logo-default,.logo-hover{height:auto;left:50%;position:absolute;top:20%;transform:translateX(-50%);transition:opacity .3s ease;width:70px}.logo-hover{opacity:0}.image{display:block;min-height:250px;object-fit:cover;transition:transform .3s ease;width:100%}.image-title{color:#8250ff;font-size:1.7em;font-weight:700;left:50%;letter-spacing:.05em;margin-right:-.05em;position:absolute;text-align:center;text-transform:uppercase;top:50%;transform:translate(-50%,-50%);transition:color .3s ease;z-index:10}.image-container:before{background-color:hsla(0,0%,100%,.8);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;transition:opacity .3s ease;width:100%}.image-container:hover:before{opacity:0}.image-container:hover .image{transform:scale(1.05)}.image-container:hover .image-title{color:#ffde00}.image-container:hover .logo-default{opacity:0}.image-container:hover .logo-hover{opacity:1}@media (max-width:1200px){.image-grid .col-4{flex:1 1 50%;max-width:50%}}@media (max-width:768px){.image-grid .col-4{flex:1 1 100%;max-width:100%}}@media (max-width:480px){.logo-default,.logo-hover{width:50px}.image-title{font-size:1.2em}}