* {
    box-sizing: border-box;
}

body {
    padding: 10px;
    background-color: rgb(229, 229, 229);
    font-family: Arial, Helvetica, sans-serif;
}

/* Main */
.main::after {
    content: "";
    display: table;
    clear: both;
}

/* Cards */
.card {
    background-color: white;
    width: 100%;
    padding: 25px;
    margin-top: 20px;
}

.card2{
    background-color: rgb(15, 32, 54);
    width: 100%;
    padding: 25px;
    margin-top: 20px;
}

.card2 h1{
    color: white;
    text-align: center;
}

/* Galerie */
.obrazky {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    text-align: center;
}

.obrazky img {
    width:250px;
    height: auto;
}

.imgboxik {
    position: relative;
    width: 100%;
    max-width: 24%;
}

.imgboxik img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

.popisek {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
    transition: background 0.3s ease-in-out;
}

.imgboxik:hover .popisek {
    background: rgba(0, 0, 0, 1);
}
/* Footer */
.footer {
    background-color: lightgray;
    text-align: center;
    margin-top: 20px;
    padding: 1px;
}

/* Responsive exceptions */
@media screen and (max-width: 800px) {

    .left,
    .right {
        width: 100%;
        padding: 0;
    }
}

@media screen and (max-width: 550px) {
    .nav a {
        float: none;
        width: 100%;
    }
}

/* SVG responsivity */
.svg-gallery {
    display: grid;
    gap: 10px; /* Mezera mezi obrázky */
  }
  
  /* 1) Rozlišení nad 1400px: 1 řádek a 4 sloupce */
  @media (min-width: 1401px) {
    .svg-gallery {
      grid-template-columns: repeat(4, 1fr); /* 4 sloupce */
    }
  }
  
  /* 2) Rozlišení mezi 800px a 1400px: 2 řádky a 2 sloupce */
  @media (min-width: 800px) and (max-width: 1400px) {
    .svg-gallery {
      grid-template-columns: repeat(2, 1fr); /* 2 sloupce */
    }
  }
  
  /* 3) Rozlišení menší než 800px: 1 sloupec a 4 řádky */
  @media (max-width: 799px) {
    .svg-gallery {
      grid-template-columns: 1fr; /* 1 sloupec */
    }
  }