.row-flex { display: flex; flex-flow: row wrap; } .mp-margin { margin-bottom: 72px; } .mp-header-margin { margin-bottom: 24px; } .mp-header, #mp-seo-text > div:first-of-type > * { font-family: DecimaNovaProBold; font-size: 32px; letter-spacing: 0.6px; line-height: 36px; } .mp-go-to-link { color: #000000; font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } .mp-go-to-link span { padding-right: 16px; } .mp-go-to-link span::after { content: ''; position: absolute; top: calc(50% - 3px); right: 6px; border-top: 1px solid #000000; border-right: 1px solid #000000; width: 6px; height: 6px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mp-go-to-link img { display: none; } .mp-brand { border: 1px solid #E7E7E7; border-radius: 2px; height: 100px; padding: 14px; } .mp-brand:hover { border-color: #E7333A; } .mp-brand img { max-width: 100%; } #mp-action { padding-right: 20px; } #mp-action img { margin-right: 12px; } #mp-loyalty { height: 210px; background-position: center; background-repeat: no-repeat; background-size: cover; border: 1px solid #DBDDE2; } #mp-loyalty h2 { margin-bottom: 8px; } #mp-loyalty p { font-size: 18px; letter-spacing: 0.3px; line-height: 24px; margin-bottom: 24px; } #mp-loyalty .btn-red { text-transform: none; border-radius: 4px; font-size: 16px; letter-spacing: 0.3px; padding: 0 24px; } .mp-present-tile { border: 1px solid #DBDDE2; background-size: cover; background-position: center; background-repeat: no-repeat; width: calc(33% - 7px); height: 250px; border-radius: 4px; } .mp-present-tile, .mp-present-tile:hover, .mp-present-tile:focus, .mp-article a, .mp-article a:hover, .mp-article a:focus { color: transparent; } .mp-present-tile:hover, .mp-present-filter:hover { border: 1px solid #E7333A; } #mp-present-filters { margin-left: 14px; width: 18%; } .mp-present-filter { height: 72px; width: 100%; border: 1px solid #DBDDE2; border-radius: 2px; padding: 25px 16px 24px; } .mp-present-filter:not(:last-of-type) { margin-bottom: 16px; } .mp-present-filter span { font-family: DecimaNovaProBold; font-size: 20px; letter-spacing: 0.4px; line-height: 24px; color: #000000; } .mp-article-margin:not(:nth-last-child(-n+2)) { margin-bottom: 28px; } .mp-article:hover .mp-article__img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .mp-article a { top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .mp-article__img { height: 222px; overflow: hidden; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid #E7E7E7; border-bottom: none; } .mp-article__img img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; -webkit-transition: all 1.1s ease; -o-transition: all 1.1s ease; transition: all 1.1s ease; } .mp-article__title { height: calc(100% - 222px); font-size: 18px; letter-spacing: 0.3px; line-height: 24px; padding: 12px; border: 1px solid #E7E7E7; } #mp-seo-text > div:first-of-type > * { margin-bottom: 16px; } #mp-seo-text p, #mp-seo-text .read-link { font-size: 15px; letter-spacing: 0.3px; line-height: 19px; } #mp-seo-text .read-link { margin-top: -8px; margin-bottom: 0; color: #666666; } #mp-seo-text .read-link:hover { color: #000000; } @media(max-width: 1199px) { #mp-present-wrapper { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } #mp-present-filters { width: 100%; margin-left: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-bottom: 20px; } .mp-present-filter { width: calc(33% - 7px); } .mp-present-filter:not(:last-of-type) { margin-bottom: 0; } } @media(max-width: 991px) { .mp-margin { margin-bottom: 40px; } .mp-header-margin { margin-bottom: 16px; } .mp-header, #mp-seo-text > div:first-of-type > * { font-size: 24px; letter-spacing: 0.4px; line-height: 28px; } .mp-brand { height: 60px; } #brand-joseph-img { max-height: 21px; } #brand-wmf-img { max-height: 26px; } #brand-kitchenaid-img { max-height: 8px; } #brand-emilyhenry-img { max-height: 18px; } #brand-smeg-img, #brand-brabantia-img { max-height: 13px; } #mp-action img { height: 24px; } #mp-loyalty { height: 160px; } #mp-loyalty p { font-size: 15px; line-height: 19px; margin-bottom: 16px; } .mp-present-tile { height: 164px; background-position: initial; } .mp-present-filter { height: 60px; padding: 18px 20px 17px 16px; } .mp-article-margin:not(:nth-last-child(-n+2)) { margin-bottom: 18px; } .mp-article__img { height: 122px; } .mp-article__title { height: calc(100% - 122px); font-size: 15px; line-height: 19px; } #mp-seo-text > div:first-of-type > * { margin-bottom: 12px; } } @media(max-width: 767px) { .mp-margin { margin-bottom: 32px; } .mp-go-to-link { position: absolute; top: 0; right: 0; left: 0; height: 28px; text-align: right; } .mp-go-to-link img { display: inline-block; margin-top: 4px; } #brand-joseph-img { max-height: 27px; } #brand-wmf-img { max-height: 32px; } #brand-kitchenaid-img { max-height: 10px; } #brand-emilyhenry-img { max-height: 23px; } #brand-smeg-img, #brand-brabantia-img { max-height: 16px; } .mp-brand { margin-bottom: 10px; } #mp-loyalty { padding: 24px 16px 18px; } #mp-loyalty h2 { margin-bottom: 4px; } #mp-loyalty p { margin-bottom: 8px; } #mp-present-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .mp-present-tile { height: 88px; margin-bottom: 14px; } #mp-present-filters { margin-bottom: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mp-present-filter { width: 100%; } .mp-present-filter:not(:last-of-type) { margin-bottom: 14px; } .mp-article-margin:not(:last-child) { margin-bottom: 16px; } } @media(max-width: 600px) { #mp-loyalty { background-image: url('/assets/img/mp-bg-loyalty-mobile.png'); } .mp-present-tile { width: 100%; background-position: center; } }