/* about page */
.one{
    margin: 30px 0px;

}
.one h3{
    font-size:xx-large;
    margin: 30px;
    margin-left: 30px;
    color:teal;
}

ul{
    width: min(100%, 60rem);
    overflow: hidden;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 4rem);
    list-style: none;
    perspective: 1000px;
    display: grid;
    row-gap: 0.5rem;
  }
  ul li.card{
    position: relative;
    padding-block: 1.5rem;
    padding-inline: 2rem;
    background-color: var(--bg-color);
    background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent);
    transform-style: preserve-3d;
    color: var(--color);
    
    display: grid;
    grid-template: 'icon' 'title' 'content';
    row-gap: 0.5rem;
    column-gap: 2rem;
  }
  ul li.card::before, ul li.card::after {
    --side-rotate: 60deg;
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    transform-origin: calc(50% - (50% * var(--ry))) 50%  ;
    transform: rotateY(calc(var(--side-rotate) * var(--ry)));
    background-color: inherit;
    background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5));  
  }
  ul li.card::before {--ry: -1; right: 100% }
  ul li.card::after {--ry: 1; left: 100% }
  
  ul li.card .icon {
    grid-area: icon;
    display: grid;
    place-items: center;
  }
  ul li.card .icon i {
    font-size: 2rem;
  }
  ul li.card .title{
    grid-area: title;
    font-size: 2.5rem;
    font-weight:bolder;
    text-align: center;
  }
  ul li.card .content{
    grid-area: content;
    font-size:large;
 
  }
  
  @media (min-width: 30rem){
    ul li.card {
      grid-template: 'icon title' 'icon content';
      text-align: left;
    }
    ul li.card .title { text-align: left }
  }