@import 'base';

img {
  max-height: 100%;
  max-width: 100%;
}

.homepage-info img {
  @include _padding(0px, 0px, 15px, 0px);
}

.homepage-info div[class*='col-'] {
  @include _padding(0px, 30px, 0px, 30px);
}

.background {
  @include _padding(40px, 0px, 40px, 0px);
}

.background--primary {
  background-color: $color-background-tint-primary;
}

.background--secondary {
  background-color: $color-background-tint-secondary;
}

.background--tertiary {
  background-color: $color-background-tint-tertiary;
}

.background--quaternary {
  background-color: $color-background-tint-quaternary;
}

.background--quinary {
  background-color: $color-background-tint-quinary;

  .background--quinary__title {
    margin: 0;
  }
}

.background--swirl {
  background-image: url('../img/ocado-swirl.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.image-row {
  align-items: baseline;
  display: flex;
  justify-content: center;

  div {
    @include _padding(0px, 30px, 0px, 30px);
  }

  img {
    @include _padding(0px, 20px, 0px, 20px);
    vertical-align: bottom;
  }
}

.portrait {
  border-radius: 50%;
  display: block;
  margin: auto;
}

.logo {
  content: url('../img/logo_c4l_hexa.png');
  position: fixed;
  top: 10px;
  z-index: $nav-bar-level + 2;
}

.glyphicon {
  @include _font-size(30px);
  font-weight: 500;
}

.glyphicon-home {
  @include _padding(0px, 0px, 14px, 0px);
}

.youtube img {
  border: 1px solid $color-background-secondary;
}

.error-page img {
  position: absolute;
  right: 15%;
  top: 7%;
}

.grid-benefits__image {
  @include _padding(0px, 0px, 3 * $spacing, 0px);
  justify-self: center;
  align-self: center;
}

.grid-benefits__image1 {
  grid-area: image1;
}

.grid-benefits__image2 {
  grid-area: image2;
}

.grid-benefits__image3 {
  grid-area: image3;
}

.educate-homepage {
  content: url('../img/home_educate_hero_hexagon.png');
  height: 350px;
}

.play-homepage {
  content: url('../img/home_play_hero_hexagon_games.png');
  height: 350px;
  width: 100%;
  object-fit: contain;
}

@media (min-width: $tablet-small-min-width) and (max-width: $desktop-large-max-width) {
  .logo {
    margin-left: 1%;
  }
}

@media (max-width: $tablet-large-max-width) {
  .logo {
    height: 60px;
  }
}

@media (min-width: $tablet-small-min-width) {
  .logo {
    content: url('../img/logo_c4l_hexa.png');
    position: fixed;
    top: 10px;
    z-index: $nav-bar-level + 2;
  }
}

@media (max-width: $mobile-max-width) {
  .logo {
    position: relative;
    height: $cfl-logo-height-xs;
  }

  .image-row {
    align-items: center;
    flex-direction: column;

    img {
      @include _padding(10px, 0px, 10px, 0px);
    }
  }
}
