#camera-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}
.camera {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}
.iframe {
    width: 100%;
    height: 300px;
    border: none;
}
.button {
    border: none;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
  }
.button1 {
    background-color: white;
    color: black;
    border: 2px solid #9e0c0c75;
  }
  
.button1:hover {
    background-color: #c91414cc;
    color: white;
  }
  
.button2 {
    background-color: white;
    color: black;
    border: 2px solid #000000;
  }
  
.button2:hover {
    background-image: url(1.jpg);
    background-position: center;
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
.petite {
    font-variant-caps: petite-caps;
    font-stretch: ultra-expanded;
    font-size: 400%;
}