html,body{ margin:0; padding:0; width:100%; height:100%; font-family: Arial; } a.preset{ display:flex; align-items: stretch; width: 100%; height: 100%; flex-direction: column; justify-content: space-between; text-decoration: none; } div.discount{ height:3%; position:relative; } div.discount div{ z-index: 10; position: absolute; bottom: -18px; left: 10px; padding: .3125rem .625rem; user-select: none; -moz-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; } div.discount div:before { content: ''; position: absolute; top: 0; left: -10px; height: 0; width: 0; border-right: 10px solid transparent; border-top: 10px solid transparent; background: 0 0!important; } a.preset div.picture { display:flex; align-items: stretch; height: 70%; width: 100%; overflow:hidden; } a.preset div.picture img{ width: 100%; } a.preset div.picture img { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } a.preset:hover div.picture img{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); } a.preset div.title{ height: 12%; display:flex; align-items: center; text-align:center; font-size:6vw; } a.preset div.title div{ display:flex; align-items: center; text-align: center; width: 100%; height:100%; border-bottom-style: solid; border-bottom-width: 1px; } a.preset div.title div{ margin: 10px 10px 10px 10px; } a.preset div.info{ display:flex; align-items: stretch; width: 100%; height: 15%; border:0; font-size:6.5vw; text-decoration: none; font-weight: bold; } a.preset div.info div{ display: flex; align-items: center; } a.preset div.info div.price{ width:55%; font-size:6vw; text-align:left; padding-left:10px; } a.preset div.info div.button{ font-size:5.5vw; display: flex; width:45%; margin: 10px; justify-content: center; }