.col2 {

    & .images:has(.image:nth-child(2)){

        & .image {
            grid-column: unset;

            & img {
              width:100%;
              height:100%;
              object-fit:cover;
            }
        }
    }
}

.hero {
  overflow:unset;
  margin-bottom:var(--global_block_padding);

  & .bgimg {
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:var(--border_radius);
  }

  & .text {
    width:50%;
    align-self:end;
  }

  & h1 {
    margin:0;
  }

  & .snapshot {
    position: absolute;
    background-color:var(--colour1);
    padding:var(--global_padding_inner);
    color:#fff;
    right:var(--global_padding_inner);
    bottom:calc(var(--global_padding_inner) * -1);
    z-index:3;
    width:40%;
    border-radius: var(--border_radius);
    display:grid;
    grid-template-columns: 1fr 1.75fr;
    gap:1rem;

    & h3 {
        font-size:clamp(1.75rem,4.75vw,2.5rem);
        color:#fff;
        grid-column: 1/-1;
    }

    & p {
        margin:0;
        line-height:1.4;
    }
  }
}

.cta .wrap {
    display:block;
    text-align: center;

    & .text {
        padding:0;
    }

    & p {
        margin-inline:auto;
    }
}

.case .image {
  background-color:#ccc;
  border-radius: var(--border_radius);

  & img {
    opacity:0.8;
  }
}


/* .col2 {
  & .images:has(.image:nth-child(2)).odd {
    & .image:last-of-type {
       grid-column: 1/-1;
       aspect-ratio:6/3;
    }
  }
} */


.narrow,
.images:has(.image:nth-child(2)) .image.narrow {
  grid-row:span 2;
  grid-column:span 1;
}

.wide,
.images:has(.image:nth-child(2)) .image.wide {
  grid-column:span 2;
  grid-row:span 1;
}

@media screen and (max-width:1400px){

  .hero {
    & .text {
      width:70%;
    }
    & .snapshot {
      position:static;
      margin:var(--global_padding_inner);
      margin-top:0;
      width:70%;
      box-sizing: content-box;
    }
  }
}

@media screen and (max-width:1100px){

 .case {
    & .wrap {
      & .text {
        grid-column: 7/-2;
        padding-inline:var(--global_padding_inner);
      }
    }

    &.flip {
      & .text {
        grid-column:2/7;
      }
    }
  }
}

@media screen and (max-width:900px){

 .case {
    & .wrap {
      & .images,
      & .text {
        grid-column: 1/-1;
      }

      & .text {
        order:0;
      }

      & .images {
        order:1;
      }
    }
  }
}

@media screen and (max-width:700px){

  .hero {
    & .text {
      width:90%;
    }
    & .snapshot {
      width:100%;
      box-sizing: border-box;
      margin:0;

      & p {
        font-size:0.9rem;
      }
    }
  }
}