Reduce your delivery costs by as much as 25%
The Mondial Relay network offers customers over 20,000 convenient and secure pickup locations at checkout.
Locations across France, the Netherlands, Belgium, Spain and Portugal, include corner shops and independent businesses that are typically open 7 days per week for easy, convenient collection
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-illustration-left {
&__image-wrapper {
position: relative;
picture {
img {
border-radius: 20px;
}
}
@include bp($lg, true) {
text-align: center;
img {
margin-left: auto;
margin-right: auto;
max-width: 310px;
left: 0;
right: 0;
}
}
@media screen and (max-width: 1100px) {
img {
max-width: 370px;
}
}
@media screen and (max-width: 992px) {
img {
max-width: 310px;
}
}
.block-hexagon {
position: absolute;
left: 0;
top: -40px;
max-width: 500px;
z-index: -1;
@media screen and (max-width: 1499px) {
left: 0;
}
@media screen and (max-width: 1260px) {
max-width: 440px;
}
@media screen and (max-width: 1100px) {
max-width: 370px;
}
@media screen and (max-width: 992px) {
max-width: 310px;
}
}
}
&__vector {
position: absolute;
&--bottom {
left: 0;
right: 0;
bottom: 0;
top: 3.125rem;
}
&--top {
right: 1.563rem;
bottom: 2.75rem;
}
}
&__text-wrapper {
position: relative;
@include bp($md, true) {
@include margin-top(rem-calc(2rem));
}
h2 {
@include margin-bottom(rem-calc(2.5rem));
color: $secondary;
position: relative;
span {
color: $primary;
}
}
.heading {
@include margin-bottom(rem-calc(2.5rem));
color: $secondary;
position: relative;
line-height: 120%;
@include fluid-type(28, 50, 375, $max-container-size);
font-weight: 700;
@include bp($lg, true) {
line-height: 100%;
}
span {
color: $primary;
}
}
h5 {
@include margin-bottom(rem-calc(1.5rem));
color: $secondary;
}
p {
@include margin-bottom(rem-calc(1.5rem));
color: $secondary;
font-weight: 400;
}
}
&__smile-img {
position: absolute;
right: 3rem;
top: -5.188rem;
max-width: 80px;
@media screen and (max-width: $xl) {
right: 0;
top: -70px;
max-width: 60px;
}
@media screen and (max-width: $md) {
right: 0;
top: -40px;
max-width: 40px;
}
}
&__float {
background-color: $primary;
@include padding(rem-calc(2.188rem 1.75rem));
max-width: 17.75rem;
position: absolute;
&--left-bottom {
bottom: 2.5rem;
left: -4.813rem;
@include bp($xl, true) {
left: 0;
}
@include bp($lg, true) {
left: 0;
bottom: 0;
@include padding(rem-calc(10));
}
}
&--left-top {
top: 2.063rem;
left: 1rem;
@include bp($xl, true) {
left: 0;
}
@include bp($lg, true) {
left: 0;
top: 0;
@include padding(rem-calc(10));
}
}
&--right-top {
top: 2.063rem;
right: 6.875rem;
@include bp($xl, true) {
right: 0;
}
@include bp($lg, true) {
right: 0;
top: 0;
@include padding(rem-calc(10));
}
}
&--right-bottom {
bottom: 2.5rem;
right: 1.187rem;
@include bp($xl, true) {
right: 0;
}
@include bp($lg, true) {
right: 0;
bottom: 0;
@include padding(rem-calc(10));
}
}
&--small {
max-width: 13.75rem;
@include padding(rem-calc(1.75rem 1.563rem));
}
p {
color: $white;
margin: 0;
font-weight: 700;
line-height: 120%;
}
}
.block-general__btn-flex {
.btn--text {
@include margin-right(rem-calc(1.875rem));
}
}
}