.expandable_img {
  cursor: pointer;
  width: 100%;
  height: fit-content;
  position: relative;
  overflow: hidden;
  height: 70vh;
}

.expandable_img.expanded {
    animation: expand .2s ease;
    background: linear-gradient(90deg, rgba(5,29,53, .8) 0%, rgba(5,29,53, 0.97) 20%, rgba(5,29,53, .97) 80%, rgba(5,29,53, .8) 100%);
    display: flex;
    height: 100vh;
    left: 0;
    padding: 30px 0;
    place-content: center;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1002;
}

.hero_expandable_image.fade_to_blue {
    position: relative;
}

.hero_expandable_image.fade_to_blue:before {
    background: linear-gradient(0deg,rgba(5,29,53,0),#051d35);
    content: "";
    height: 111px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.hero_expandable_image.fade_to_blue:after {
    background: linear-gradient(180deg,rgba(5,29,53,0),#051d35);
    content: "";
    height: 111px;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.hero_expandable_image img {
  transition: transform .75s ease;
  position: absolute;
  left: 0;
}

.hero_expandable_image[data-state="domloaded"] img {
  animation: slowScroll 180s linear infinite;
}

.hero_expandable_image:hover img {
  transform: scale(1.025);
}

.expandable_img.expanded:after {
    background-image: radial-gradient(#333 5%,#333 15%,#fff 60%);
    background-size: 100% 100%;
    content: "";
    height: 100%;
    left: 0;
    opacity: .25;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    mix-blend-mode: hue;
}

.expandable_img.expanded img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.expandable_img:not(.expanded):after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSIjRkZGIiBoZWlnaHQ9IjgwMHB4IiB3aWR0aD0iODAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHZpZXdCb3g9IjAgMCAyNDIuMTMzIDI0Mi4xMzMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBpZD0iWE1MSURfMTVfIiBkPSJNMjI3LjEzMyw4My4wMzNjOC4yODMsMCwxNS02LjcxNiwxNS0xNVYxNWMwLTguMjg0LTYuNzE3LTE1LTE1LTE1SDE3NC4xYy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1ICBzNi43MTYsMTUsMTUsMTVoMTYuODJsLTY5Ljg1NCw2OS44NTRMNTEuMjEzLDMwaDE2LjgyYzguMjg0LDAsMTUtNi43MTYsMTUtMTVzLTYuNzE2LTE1LTE1LTE1SDE1QzYuNzE3LDAsMCw2LjcxNiwwLDE1djUzLjAzMyAgYzAsOC4yODQsNi43MTcsMTUsMTUsMTVjOC4yODUsMCwxNS02LjcxNiwxNS0xNXYtMTYuODJsNjkuODU0LDY5Ljg1NEwzMCwxOTAuOTJWMTc0LjFjMC04LjI4NC02LjcxNS0xNS0xNS0xNSAgYy04LjI4MywwLTE1LDYuNzE2LTE1LDE1djUzLjAzM2MwLDguMjg0LDYuNzE3LDE1LDE1LDE1aDUzLjAzM2M4LjI4NCwwLDE1LTYuNzE2LDE1LTE1YzAtOC4yODQtNi43MTYtMTUtMTUtMTVoLTE2LjgyICBsNjkuODU0LTY5Ljg1NGw2OS44NTQsNjkuODU0SDE3NC4xYy04LjI4NCwwLTE1LDYuNzE2LTE1LDE1YzAsOC4yODQsNi43MTYsMTUsMTUsMTVoNTMuMDMzYzguMjgzLDAsMTUtNi43MTYsMTUtMTVWMTc0LjEgIGMwLTguMjg0LTYuNzE3LTE1LTE1LTE1Yy04LjI4NSwwLTE1LDYuNzE2LTE1LDE1djE2LjgybC02OS44NTQtNjkuODU0bDY5Ljg1NC02OS44NTR2MTYuODIgIEMyMTIuMTMzLDc2LjMxNywyMTguODQ4LDgzLjAzMywyMjcuMTMzLDgzLjAzM3oiLz4KPC9zdmc+");
    background-size: contain;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.hero_expandable_image {
  width: 100%;
  height: 100%;
  display: flex;
  max-height: 70vh;
  overflow: hidden;
}

.hero_expandable_image.left {
    justify-content: flex-start;
}

.hero_expandable_image.right {
    justify-content: flex-end;
}

.hero_expandable_image.center {
    justify-content: center;
}

@keyframes expand {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 767px) {
    .expandable_img:not(.expanded) {
        max-height: 250px;
        margin-top: 80px;
    }

    .hero_expandable_image.right {
        justify-content: flex-start;
    }
}

@keyframes slowScroll {
  0% {
    top: 0%;
  }
  50% {
    top: calc((70vh * 9.3) * -1);
  }
  100% {
    top: 0%;
  }

}