.box-over-image {
  width: 100%;
  position: relative;
}

.box-over-image__img {
  width: 100%;
  height: auto;
  max-width: 720px;
  max-height: 720px;
  object-fit: contain
  border-radius: 2px;
}

.box-over-image--align-top-right .box-over-image__box {
  padding: 100px;
}

.box-over-image__box {
  padding: 60px 80px;
  border-radius: 2px;
  text-align: start;
  transition: top 0.3s ease-in-out;
}

.box-over-image__box--shadow {
  box-shadow: 0px 16px 32px rgba(86, 86, 86, 0.05), 0px 8px 16px rgba(86, 86, 86, 0.05);
}

.box-over-image__box--accent {
  background: linear-gradient(180deg, #235EA7 0%, #142A47 100%);
}

.box-over-image__box--accent.box-over-image__box--shadow {
  box-shadow: 0px 16px 32px rgba(27, 68, 95, 0.2), 0px 8px 16px rgba(27, 68, 95, 0.2);
}

.box-over-image__box--dark {
  background: #565656;
}

.box-over-image__box--light {
  background: #F5F5F5;
}

.box-over-image__box--white {
  background: #ffffff;
}

.box-over-image__subhead{
  color: #142A47;
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-style: normal;
  line-height: 110%; /* 26.4px */
}

/* Headline for top right align */
.box-over-image--align-top-right .box-over-image__box h3 {
  color: #235EA7;
  font-family: var(--headings-font-family);
  font-size: 2.78rem;
  font-weight: var(--headings-strong-font-weight);
  text-transform: uppercase;
  font-style: italic;
}

/* Headline for all align */
.box-over-image__box h3 {
  color: #142A47;
  font-family: var(--text-font-family);
  font-size: 1.67rem;
  font-weight: var(--strong-font-weight);
  line-height: 110%; /* 33px */
  text-transform: unset;
}

@media (min-width: 768px) {
  .box-over-image--align-left {
    text-align: right;
  }
  
  .box-over-image--align-right {
    text-align: left;
  }

  .box-over-image--align-bottom-left,
  .box-over-image--align-bottom-right {
    padding-bottom: 96px;
  }
  
  .box-over-image__box {
    width: 100%;
    max-width: 804px;
    position: absolute;
  }

  /* Headline for top right align */
  .box-over-image--align-top-right .box-over-image__box h3 {
    color: #235EA7;
    font-family: var(--headings-font-family);
    font-size: 4.00rem;
    font-weight: var(--headings-strong-font-weight);
    text-transform: uppercase;
    font-style: italic;
  }

  .box-over-image__subhead{
    color: #142A47;
    font-family: var(--text-font-family);
    font-weight: var(--text-font-weight);
    font-style: normal;
    line-height: 110%; /* 26.4px */
  }

  /* Headline for none top right align */
  .box-over-image__box h3 {
    color: #142A47;
    font-family: var(--text-font-family);
    font-size: 1.67rem;
    font-weight: var(--strong-font-weight);
    line-height: 110%; /* 33px */
    text-transform: unset;
  }
  
  .box-over-image--align-left .box-over-image__img,
  .box-over-image--align-right .box-over-image__img {
    width: 83%;
  }

  .box-over-image--align-left .box-over-image__box,
  .box-over-image--align-right .box-over-image__box {
    top: 50%;
    transform: translateY(-50%);
  }

  .box-over-image--align-left .box-over-image__box {
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .box-over-image--align-right .box-over-image__box {
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .box-over-image--align-top-left .box-over-image__box,
  .box-over-image--align-top-right .box-over-image__box,
  .box-over-image--align-bottom-left .box-over-image__box,
  .box-over-image--align-bottom-right .box-over-image__box {
    min-height: 72px;
  }
  
  .box-over-image--align-top-left .box-over-image__box
    top: 0;
  }
  
  .box-over-image--align-top-right .box-over-image__box {
    top: -50%;
  }
  
  .box-over-image--align-bottom-left .box-over-image__box,
  .box-over-image--align-bottom-right .box-over-image__box {
    bottom: 0;
  }
  
  .box-over-image--align-top-left .box-over-image__box,
  .box-over-image--align-bottom-left .box-over-image__box {
    left: 8.5%;
  }
  
  .box-over-image--align-top-right .box-over-image__box,
  .box-over-image--align-bottom-right .box-over-image__box {
    right: 0;
  }
}

.box-over-image__box .box-over-image__anchor-link {
  position: relative;
  display: block;
  width: 100%;
  height: 51px;
  text-decoration: none;
  transition: transform 0.3s ease-in-out;
}

.box-over-image__box .box-over-image__anchor-link:hover {
  transform: translateY(3px);
}

.box-over-image__box .box-over-image__anchor-link:hover svg {
  transform: translateX(-50%) translateY(3px);
}

.box-over-image__box .box-over-image__anchor-link:hover svg rect {
  fill: #9EC64D;
}

.box-over-image__box .box-over-image__anchor-link svg {
  position: absolute;
  bottom: -25px; /* Half the height of the SVG (51px) to center it on the bottom edge */
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 50px;
  height: 51px;
  transition: transform 0.3s ease-in-out;
  z-index: 10;
}

.box-over-image__box .box-over-image__anchor-link svg rect {
  transition: fill 0.3s ease-in-out;
}

/* Progressive transition starting at 1440px, decreasing by 100px increments */
@media (max-width: 1440px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -40%;
  }
}

@media (max-width: 1340px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -30%;
  }
}

@media (max-width: 1240px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -25%;
  }
}

@media (max-width: 1140px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -20%;
  }
}

@media (max-width: 1040px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -15%;
  }
}

@media (max-width: 940px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -10%;
  }
}

@media (max-width: 840px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: -5%;
  }
}

@media (max-width: 740px) {
  .box-over-image--align-top-right .box-over-image__box {
    top: 0%;
  }
}


@media (min-width: 768px) and (max-width: 1139px) {
  .box-over-image__box {
    width: 50%;
  }

  .box-over-image--align-top-right .box-over-image__box{
    padding: 50px;
  }
}

@media (max-width: 767px) {
  .box-over-image__img {
    width: 100%;
  }
  
  .box-over-image__box {
    position: relative;
    margin: -24px 24px 24px;
  }
}

@media (max-width: 479px) {
  .box-over-image__box {
    margin: -24px 12.0px 24px;
    padding: 24px;
  }
}

.box-over-image__box > p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Additional Images
   ========================================================================== */

.box-over-image__additional-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 1rem 0;
  width: 100%;
  column-gap: 24px;
}

.box-over-image__additional-images.num-1 {
  justify-content: flex-end;
  margin-top: -60px;
}

@media (max-width: 1124px) {
  .box-over-image__additional-images.num-1 {
    margin-top: 24px;
  }
}

.box-over-image__additional-image {
  max-width: 230px;
  flex: 1 1 calc(50% - 0.5rem);
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Responsive adjustments for additional images */
@media (max-width: 767px) {
  .box-over-image__additional-images {
    gap: 48px;
  } 
  
  .box-over-image__additional-image {
    flex: 1 1 calc(50% - 0.375rem);
  }
  
  .box-over-image__additional-images.num-1 {
    justify-content: center;
    margin-top: 24px;
  }
  .box-over-image--align-top-right .box-over-image__box {
    padding: 48px;
  }
}

@media (max-width: 479px) {
  .box-over-image__additional-images {
    gap: 0.5rem;
  }
  
  .box-over-image__additional-image {
    flex: 1 1 calc(50% - 0.25rem);
  }
}