/* Custom Overrides */
.blog {
  background-color: white;
}

main {
  background-color: white;
}

.header {
  height: unset;
  display: flex;
  /* flex-direction: column; */
  /* align-items: center; */
  justify-content: flex-end;
}

.blog_body_image {
  padding-top: unset;
  padding-bottom: unset;
}

.blog_hero {
  background-image: url(../resources/microsoft-hybrid/video-background.png);
  background-size: cover;
  background-position: center;
  background-attachment: unset;
  height: 100%;
}

.blog_text {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: 40%;
  top: 40%;
  text-align: left;
  font-size: 24px;
}

.header_logo {
  position: absolute;
  width: 45%;
  z-index: 1;
  left: 47%;
  top: 20%;
}

.header_image {
  width: 100%;
  height: intrinsic;
  z-index: 0;
}

.thumbnails {
  justify-content: left;
  display: flex;
  height: unset;
  position: relative;
}

.title_thumbnails {
  --titleThumbnailWidth: calc(1250px * 0.55);
  --titleThumbnailHeight: calc(var(--titleThumbnailWidth) / 3.28);
  z-index: 1;
  position: absolute;
  width: var(--titleThumbnailWidth);
  margin-top: calc(var(--titleThumbnailHeight) * -0.25);
}

.animation-item {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1250px * 0.7);
}

.thumbnails_background {
  width: 100%;
  height: intrinsic;
  z-index: 0;
}

.animations {
  text-align: center;
  background-image: url("../resources/microsoft-hybrid/animation-background.png");
  background-size: contain;
  background-repeat: repeat-y;
  position: relative;
}

.title_animations {
  position: absolute;
  --titleAnimationWidth: calc(1250px * 0.55);
  --titleAnimationHeight: calc(var(--titleAnimationWidth) / 3.48);
  top: calc(var(--titleAnimationHeight) * -1);
  width: var(--titleAnimationWidth);
  left: calc(100% - var(--titleAnimationWidth));
}

.animation-gif {
  width: 75%;
  margin-top: 150px;
  margin-bottom: 150px;
}

/* Breakpoint for the body max width */
@media (max-width: 1230px) {
  .title_thumbnails {
    --titleThumbnailWidth: 55vw;
  }

  .animation-item {
    width: 75%;
  }

  .title_animations {
    --titleAnimationWidth: 55vw;
  }

  .blog_text {
    font-size: calc(18px + 0.5vw);
  }

  .animation-gif {
    margin-top: 10vw;
    margin-bottom: 10vw;
  }
}

/* LG */
@media (max-width: 1170px) {
  .blog_text {
    left: 5%;
    width: 90%;
    top: 20%;
  }

  .header_logo {
    top: 0%;
  }
}

/* MD */
@media (max-width: 992px) {
  .blog_text {
    font-size: calc(17px + 0.5vw);
  }
}

/* SM */
@media (max-width: 768px) {
  .blog_text {
    font-size: calc(16px + 0.5vw);
  }
}

/* XS */
@media (max-width: 544px) {
  .blog_text {
    font-size: calc(14px + 0.5vw);
  }
}

/* iPhone Plus */
@media (max-width: 414px) {
  .blog_text {
    font-size: calc(12px + 0.5vw);
  }
}

/* iPhone X */
@media (max-width: 375px) {
  .blog_text {
    font-size: calc(10px + 0.5vw);
  }
}

/* iPhone SE */
@media (max-width: 320px) {}