body:has(.page-home) {
  
  .main-header {
    position: absolute;
    background: transparent;
  }
}
.page-home {
  /* background: #ddd; */
  padding-top: 140px;
  display: flex;
  height: 100dvh;
  min-height: auto;
  position: relative;
  .bg {
    position: absolute;
    inset: 0;
    .swiper {
      width: 100%;
      height: 100%;
    }
  }
  img,
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .letters {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--width);
    z-index: 20;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 32px;
    width: 100%;
    align-items: flex-end;
    opacity: 1;
    transition: 0.2s opacity;
    .letter-l,
    .letter-b {
      max-height: calc(calc(100dvh - 210px) / 2);
      display: grid;
      svg {
        height: 100%;
        width: auto;
      }
    }
    .letter-a {
      max-height: calc(calc(100dvh - 210px) / 2);
      text-align: right;
      svg {
        height: 100%;
        width: auto;
      }
    }
    &[data-position=""] {
      opacity: 0;
    }
    .letter-l {
      svg {
        aspect-ratio: 187/285;
      }
    }
    .letter-b {
      svg {
        aspect-ratio: 223/285;
      }
    }
    .letter-a {
      svg {
        aspect-ratio: 263/286;
      }
    }
    .left {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .right {
      display: flex;
    }
    &[data-position="2"] {
      .left {
        align-self: flex-start;
      }
    }
    &[data-position="3"] {
      .left,
      .right {
        align-self: flex-start;
      }
    }
    &[data-position="4"] {
      .right {
        align-self: flex-start;
      }
    }
  }
  @media (max-width: 650px) {
    .letters {
      .letter-a,
      .letter-b,
      .letter-l {
        max-height: initial !important;
      }
      svg {
        width: 28vw !important;
        height: auto !important;
      }
      .letter-l svg {
        width: 25vw !important;
      }
      .letter-a svg {
        width: 33vw !important;
      }
    }
  }
}

.page-projectes {
  .image-title {
    opacity: 1 !important;
    translate: 0px !important;
    margin: 0 !important;
    height: calc(var(--block) + 3px);
    display: flex;
    align-items: flex-end;
  }
  .bloque-two-images,
  .bloque-full-image {
    padding-top: 0;
    padding-bottom: calc(var(--block) * 2);
  }
}

.page-projectes-single {
  .bloque-parallax {
    margin-top: calc(var(--block) * 2);
  }
  .bloque-text-right:first-of-type {
    p {
      margin-bottom: 0;
    }
  }
}