.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    height:100%;
    padding: 0;
    margin: 0;
    z-index:0;
    mask-image:url('../img/x-logo-shape.svg');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    aspect-ratio: 0.75;


    & li {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100vw;
        height:100%;
        max-width:100%;
        left: 0;
        top: 0;
        padding:0;
        margin:0;

        &:first-child {
            position: relative;
            display: block;
            float: left;
        }
    }

    & img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        height:100%;
        object-fit:cover;
        border: 0;
    }
}

main {
  min-height:100vh;
  min-height:100dvh;
  padding:0;
}

h1 {
  clear:left;
}

.holding {

  display:grid;
  grid-template-columns: calc(100vh * 0.75) 1fr;
  height:100vh;

  & .right {
    padding:2rem;
    display:grid;
    align-items:center;
    justify-content: center;
    container-name: right-side;
    container-type:inline-size;

    & div {
      display:grid;
      grid-template-columns: 200px max-content;
      gap:2rem;
      align-items: center;
      justify-content: center;
      width:max-content;
    }

    & p {
      grid-column: 1/-1;
      text-align: center;
      word-break: break-word;
      margin:0;
    }
  }
}

h1 {
  font-size:1.4rem;
  font-weight:300;
  margin:0;
  border-left:1px solid #aaa;
  padding-left:2rem;
}

@container right-side (width < 800px){

  .holding .right div {
    grid-template-columns: 1fr;
    gap:1rem;
    text-align: left;
    margin-left:-5vw;

    & h1 {
      padding:0;
      border:none;
    }

    & p {
      text-align: left;
      line-height:1;
    }
  }
  
}

@media screen and (max-width:850px){
  .holding {
    grid-template-columns: 1fr;

    & .right {
      position:absolute;
      margin:0;
      padding:0;
      width:min(400px,calc(100vw) - 2rem);
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);

      & > div {
        display:grid;
        gap:0.5rem;
        padding:1rem;
        background-color:#fff8;
        backdrop-filter:blur(5px);
        margin:0;

        & #logo {
          width:min(200px,100%);
          max-width:100%;
        }

        
      }
    }
  }

  .rslides {
    mask-size:cover;
    mask-position:center;
  }

  
}