@media (min-width: 64rem) {
  .hero {
    overflow: hidden;
    padding-bottom: 24px;
    padding-top: 0;
  }

  .hero__grid {
    min-height: 50vmin
  }

  .hero__images {
    position: relative;
    width: max-content;
  }

  .hero__images-bottom {
    display: flex;
    gap: 16px;
    align-items: start;
  }

  @media (prefers-reduced-motion: no-preference) {

    .hero__image {
      animation-duration: 2s;
      animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }

    .hero__image--1 {
      animation-name: hero-image--1;
    }

    @keyframes hero-image--1 {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(0);
      }
    }

    .hero__image--2 {
      animation-name: hero-image--2;
    }

    @keyframes hero-image--2 {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }

    .hero__image--3 {
      animation-name: hero-image--3;
    }

    @keyframes hero-image--3 {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(0);
      }
    }

    .hero__image--4 {
      animation-name: hero-image--4;
    }

    @keyframes hero-image--4 {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
  }
}

/* homepage video */

.video {
  position: relative;

  /* Negative margin to remove the whitespace between the video and the theme animation section */
  margin-bottom: -5px;
}

.video__controls {
  position: absolute;
  bottom: 24px;
  right: 24px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.video__button {
  border-radius: 8px;
  padding: 4px;
  background: #FFF;
  box-shadow: 0px 2px 12px 0px rgba(46, 92, 153, 0.10);
  border: none;
  color: #021B41;
  cursor: pointer;
  transition: color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.video__button:hover {
  color: #3468AD;
}

.video__icon {
  width: 2rem;
  height: 2rem;
  display: block;
  fill: currentColor;
}

.video__video {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.gallery {
  --gap: 8px;
  display: flex; /* using flex as ba-grid prevented the images from being full height */
  flex-direction: column;
  width: calc(var(--vw, 1vw) * 100);
  gap: var(--gap);
  overflow: hidden;
}

.gallery ba-image {
  flex: 1;
}

.gallery__row {
  display: flex;
  gap: var(--gap);
}

.gallery__row--1 {
  width: 110vw;
  margin-left: -5vw;
}

.gallery__row--2 {
  width: 150vw;
  margin-left: -25vw;
}

@media (min-width: 50rem) {
  .gallery {
    --gap: 24px;
  }
}

.theme-section {
  overflow: hidden;
  padding: var(--ba-page-segment-padding-top) 0;
}

.theme-section__row {
  position: relative;
  padding: 0 var(--ba-page-segment-page-margin);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.theme-section__card {
  width: calc(50% - 16px);
  height: 280px;
  position: relative;
  transition: transform cubic-bezier(0.645, 0.045, 0.355, 1) 1s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.theme-section__card-face {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  backface-visibility: hidden;
}

.theme-section__card-face--back {
  transform: rotateY(180deg);
}

.theme-section__card-face--default {
  border: 1px solid #CFD0D9;
}

.theme-section__card-face--blue200 {
  background: #DFE7F2;
}

.theme-section__card-face--midnight500 {
  background: #021B41;
  color: #fff;
}

.theme-section__card-face--midnight700 {
  background: #01122C;
  color: #fff;
}

.theme-section__card-face--sale {
  background: #ce210f;
  color: #fff;
}

.theme-section__card-face--club-blue {
  background: #0546CD;
  color: #fff;
}

.theme-section__card-face--club-bronze {
  background: #B84517;
  color: #fff;
}

.theme-section__card-face--club-silver {
  background: #6F7372;
  color: #fff;
}

.theme-section__card-face--club-gold {
  background: #987000;
  color: #fff;
}

.theme-section__card-face--club-premier {
  background: #1A1A1A;
  color: #fff;
}

.theme-section__row--flip .theme-section__card {
  transform: perspective(1000px) rotateY(-180deg);
}

.theme-section__card--1 {
  transition-delay: 0ms;
}
.theme-section__card--2 {
  transition-delay: 150ms;
}
.theme-section__card--3 {
  transition-delay: 300ms;
}
.theme-section__card--4 {
  transition-delay: 400ms;
}

@media (min-width: 64rem) {
  .theme-section__row {
    flex-wrap: nowrap;
    left: 5vw;
    padding: 0;
  }
  
  .theme-section__card {
    width: auto;
    flex: 1;
    height: 480px;
  }

  .theme-section__card-face {
    padding: 48px 64px;
  }
}


/* A British Original animation */

.ba-orginal-section {
  padding-top: 0;
}

.ba-original__phrase {
  display: none;
  animation: ba-original__phrase 4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards 1;
}

@keyframes ba-original__phrase {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}

.ba-original__char-group {
  display: none;
  opacity: 1;
  animation: ba-original__chargroup 4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards 1;
}

@keyframes ba-original__chargroup {
  0%, 75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ba-original-char {
  visibility: hidden;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.ba-original-char--1 {
  animation-name: ba-original-char-1;
}
.ba-original-char--2 {
  animation-name: ba-original-char-2;
}
.ba-original-char--3 {
  animation-name: ba-original-char-3;
}
.ba-original-char--4 {
  animation-name: ba-original-char-4;
}
.ba-original-char--5 {
  animation-name: ba-original-char-5;
}
.ba-original-char--6 {
  animation-name: ba-original-char-6;
}
.ba-original-char--7 {
  animation-name: ba-original-char-7;
}

@keyframes ba-original-char-1 {
  0%, 13% {
    visibility: hidden;
  }
  14%, 100% {
    visibility: visible;
  }
}
@keyframes ba-original-char-2 {
  0%, 27% {
    visibility: hidden;
  }
  28%, 100% {
    visibility: visible;
  }
}
@keyframes ba-original-char-3 {
  0%, 41% {
    visibility: hidden;
  }
  42%, 100% {
    visibility: visible;
  }
}
@keyframes ba-original-char-4 {
  0%, 55% {
    visibility: hidden;
  }
  56%, 100% {
    visibility: visible;
  }
}
@keyframes ba-original-char-5 {
  0%, 69% {
    visibility: hidden;
  }
  70%, 100% {
    visibility: visible;
  }
}
@keyframes ba-original-char-6 {
  0%, 83% {
    visibility: hidden;
  }
  84%, 100% {
    visibility: visible;
  }
}
@keyframes ba-original-char-7 {
  0%, 97% {
    visibility: hidden;
  }
  98%, 100% {
    visibility: visible;
  }
}

@media (forced-colors: active) {
  .video__button {
    background-color: buttonFace;
    color: buttonText;
    border: 1px solid buttonText;
  }
}


.theme-animation {
  position: relative;
  height: 1024px;
}

.theme-animation__item {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  transition: clip-path;

  /* Height of the container with padding  */
  height: 1024px;
  display: flex;
  align-items: center;
}

.theme-animation__item ba-page-segment {
  flex-basis: 100%;
  height: 1024px;
}

.theme-animation__item ba-page-segment > ba-grid {
  height: 100%;
}

@media(min-width: 800px) {
  .theme-animation {
    height: 882px;
  }

  .theme-animation__item {
    height: 883px; /* 882px + 1px to prevent an extra line that sometimes appears */
  }

  .theme-animation__item ba-page-segment {
    height: 882px;
  }
}

/* Display styles */

.bagel-docs-display-summary {
  font-family: Mylius Modern, Open Sans, helvetica, arial, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0.012em;
  max-width: none;
}

.bagel-docs-display-primary {
  font-family: Mylius Modern, Open Sans, helvetica, arial, sans-serif;
  font-weight: 300;
  font-size: 2.75rem;
  line-height: 1.27;
  letter-spacing: 0.012em;
  max-width: none;
}

@media (min-width: 50rem) {
  .bagel-docs-display-primary  {
    font-size: 3.5rem;
    line-height: 1.21;
  }
}

@media (min-width: 40rem) {
  :root .double {
    --ba-page-segment-padding-top: 128px;
    --ba-page-segment-padding-bottom: 128px;
  }
}

.icon-grid__icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

@media (min-width: 50rem) {
  .icon-grid__icon {
    width: 64px;
    height: 64px;
  }
}

svg {
  fill: currentColor;
}