body {
    background: #ffffc1;
    font-family: Arial, sans-serif;
      }
 /* * {
  box-sizing: border-box;
 } */
 .fabricwrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 1200px;
    border: 0.25rem solid red;
    border-radius: 0.5rem;
    padding: 0.5rem;
 }
.fabric-video-container {
           display: flex;
            width: 100%;
            justify-content: space-around;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }
.image-container {
            display: flex;
            flex-wrap:nowrap;
            gap: 10px;
            align-items: center;
            max-width: 950px;
            margin: 10px auto;
        }
 .image {
            flex: 1;
            position: relative;
            outline: 0px dashed black;
        }
        .image img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
            border: 0.375rem solid red;
            border-radius: 0.5rem;
        }
       figcaption {
            font-size: 1.0rem;
            font-weight: 600;
            padding: 0.35rem;
            text-align: center;
            color: #111;
          }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.80);
            justify-content: center;
            align-items: center;
            z-index: 5000;
           }
 .overlay img {
    max-width: 90%;
    max-height: 90%;
    cursor: pointer;
    border: 0.375rem solid red;
    border-radius: 0.5rem;
}
 @media only screen and (max-width: 768px) {
.bikewrapper {
    justify-content: space-between;
    border: 0.25rem solid red;
    border-radius: 0.5rem;
         }
.video-container {
     display: flex;
     width: 100%;
     justify-content: space-around;
     border-radius: 0.5rem;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }
          
 .image-container {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      align-items: center;
      max-width: 768px;
      margin: 10px auto;
  }
  .image {
      flex: 1;
      position: relative;
      outline: 0px dashed black;
  }
          
  .image img {
      max-width: 100%;
      height: auto;
      cursor: pointer;
      border: 0rem solid red;
       border-radius: 0.5rem;
   }
          
  .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.80);
      justify-content: center;
      align-items: center;
      z-index: 5000;
  }
          
  .overlay img {
      max-width: 90%;
      max-height: 90%;
      cursor: pointer;
      border: 0.375rem solid red;
      border-radius: 0.5rem;
  }
  }