.layout-fifty-fifty{
  overflow:hidden;
  position:relative;
  width:100%;

  @media (width < 1024px){
    padding-inline:var(--space-lg);
  }

  @media (width >= 1024px){
    padding-inline:var(--space-xl);
  }

  .layout-fifty-fifty__background{
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;

    & *{
      height:100%;
      width:100%;
    }

    .media{
      left:0;
      position:absolute;
      top:0;
    }

    img,
    video{
      -o-object-fit:cover;
      object-fit:cover;
      -o-object-position:top;
      object-position:top;
    }
  }

  .layout-fifty-fifty__media{
    box-shadow:var(--box-shadow-default);
    height:auto;
    margin-inline:auto;
    max-width:67.2rem;
    width:100%;
    z-index:1;

    & *{
      height:auto;
      width:100%;
    }
  }

  .layout-fifty-fifty__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    z-index:1;

    @media (width < 1024px){
      align-items:center;
      row-gap:var(--space-lg);
      text-align:center;
    }

    @media (width >= 1024px){
      align-items:flex-start;
      row-gap:var(--space-xl);
    }
  }

  .layout-fifty-fifty__links{
    align-items:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;

    @media (width < 1024px){
      gap:var(--space-lg);
      justify-content:center;
    }

    @media (width >= 1024px){
      gap:var(--space-xl);
    }
  }
}

.layout-fifty-fifty--left{

  .layout-fifty-fifty__media{
    @media (width >= 1024px){
      order:1;
    }
  }

  .layout-fifty-fifty__content{
    @media (width >= 1024px){
      order:2;
    }
  }
}

.layout-fifty-fifty--right{

  .layout-fifty-fifty__media{
    @media (width >= 1024px){
      order:2;
    }
  }

  .layout-fifty-fifty__content{
    @media (width >= 1024px){
      order:1;
    }
  }
}