main{
    padding: min(5em, 7%);
    /* max-width: 100%; */
    
}
.main-layout{
    display: grid;
    padding: 0.5rem;
    border-radius: 24px;
    /* max-width: 100%; */
    /* box-sizing: border-box; */
    
}
.car-site-wrapper{
    display: grid;
    gap: 1rem;
    grid-template:
    "images images images images"
    "car-content car-content car-content stats"
    /[col-start] 1fr [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-end];
    border:2px solid var(--hover-color);




    .images{
        grid-area: images;
        max-width: 100%;
        
        gap: 1rem;
        display: grid;
        grid-template:
        "img1 img1 img2 img3"
        "img1 img1 img4 img5"
        /[col-start] 1fr [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-end];

        
        .car-image{
            max-width:100%;
            aspect-ratio:16/9;
            object-fit:cover;
            display: block;
            border-radius: calc(24px - .5rem);
        }

        li:nth-of-type(1){
            grid-area: img1;
            aspect-ratio:16/9;
        }
        li:nth-of-type(2){
            grid-area: img2;
        }
        li:nth-of-type(3){
            grid-area: img3;
        }
        li:nth-of-type(4){
            grid-area: img4;
        }
        li:nth-of-type(5){
            grid-area: img5;
        }
        

    }

    .car-content{
        grid-area: car-content;

        padding: 0.5rem;
        border-radius: 24px;
    }
    .stats{
        grid-area: stats;
        display: grid;
        border:2px solid var(--hover-color);
        padding: 1.5rem;
        border-radius: 24px;
        font-size: 1.3rem;
        height: 150px;
        align-items: center;
        min-width: 25%;
    }

}
.list-container{
    /* width:100%; */
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    /* align-items: stretch; */
  
    li{
      /* width:100%; */
      border-radius:32px;
      border:2px solid var(--hover-color);
      padding:0.5rem;
      display:flex;
      flex-direction: column;
      flex:1;
    }
    .car-text{
      padding:0.5rem;
      h3{
        text-transform: capitalize;
      }
    }
    .lean-more{
      border-radius:99px;
    }
  
    a:has(>.car-img){
      padding:0.5rem;
      justify-content: center;
      border-radius:24px;
    }
    a:has(> h3){
      font-size: 1.2rem;
      font-weight: bold;
      border-radius:10px;
      padding: .5em 1em;
    }
  
    .car-img{
    max-width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:calc(24px - 0.5rem);

    }
    .edit{
      text-align: center;
      padding: 0.5rem;
      justify-content: center;
      border-radius: 99px;
    }
    .car-options{
      display: flex;
      width: 100%;
      li{
        width: 50%;
          border: 0;
          /* width: min(5em, 35%); */
      }
    }
    a{
        display:flex;
        text-decoration:none;
        color:var(--text-color);
        padding:1em 2em;
        transition: background-color 150ms ease;

      }
      a.accent-link{
        background-color:var(--accent-color);
        /* color:var(--text-color); */
        margin-top:auto;
      }
      a:hover{
        background-color:var(--hover-color);
      }
  }







@media screen and (max-width:1300px){
    .car-site-wrapper{
        grid-template:
        "images images images images"
        "car-content car-content stats stats"
        /[col-start] 1fr [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-end];
    }

}
@media screen and (max-width:1000px){
    .page-wrapper{
        margin-top: 2vw;
    }
    .car-site-wrapper{

        .images{
            grid-template:
            "img1 img1 img1 img1"
            "img2 img2 img3 img3"
            "img4 img4 img5 img5" ;
        }

    }

}
@media screen and (max-width:700px){
    .page-wrapper{
        margin-top: 7vw;
    }
    .car-site-wrapper{
        grid-template:
        "images"
        "stats"
        "car-content"
        /[col-start] 1fr [col-end] ;

        .images{
            grid-template:
            "img1 img1"
            "img2 img3"
            "img4 img5"
            /[col-start] 1fr [col-1]  1fr [col-end] ;
        }

    }

}