#uvod {
  padding: 3rem 0;
  background-image: url("../assets/data/kongres-room.webp");
  background-size: auto calc(100% - 6rem);
  background-repeat: no-repeat;
  background-position: right calc(50% + 23rem) center;
}
@supports not (background-image: url("../assets/data/kongres-room.webp")) {
  #uvod {
    background-image: url("../assets/data/kongres-room.png");
  }
}
@media (max-width: 500px) {
  #uvod {
    padding-top: 8rem;
    padding-bottom: 20rem;
    background-size: auto 17.5rem;
    background-position: right calc(0% + 1rem) bottom calc(0% + 1rem);
  }
}
@media (max-width: 500px) {
  #uvod h1 {
    font-size: 1.75rem;
  }
}
#uvod .middle > div {
  padding-top: 7.3rem;
  width: 100%;
  padding-left: calc(50% + 5rem);
}
@media (max-width: 500px) {
  #uvod .middle > div {
    padding-left: 0;
  }
}
#uvod .middle > div p {
  margin-bottom: 2rem;
}
#uvod .middle > div .favorite {
  margin-left: -1.5rem;
  margin-bottom: 0.85rem;
}
#uvod .middle > div .favorite span {
  font-size: 6rem;
}

#reference {
  text-align: center;
}

#o-nas,
#studio,
#expozice {
  padding: 4rem 0;
}
#o-nas .middle,
#studio .middle,
#expozice .middle {
  gap: 1rem;
}
@media (max-width: 500px) {
  #o-nas .middle,
  #studio .middle,
  #expozice .middle {
    flex-wrap: wrap;
    gap: 2rem;
  }
}
#o-nas picture,
#studio picture,
#expozice picture {
  height: 21rem;
  width: 24rem;
  position: relative;
}
@media (max-width: 500px) {
  #o-nas picture,
  #studio picture,
  #expozice picture {
    width: 100%;
  }
}
#o-nas picture img,
#studio picture img,
#expozice picture img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

#studio .middle {
  gap: 4rem;
}
#studio picture {
  width: 23.65rem;
  height: 21.7rem;
}

#expozice picture {
  width: 26.7rem;
  height: 20.6rem;
}

#studio .flex:has(> .btn), #expozice .flex:has(> .btn) {
  align-self: flex-start;
  margin-top: 1.45rem;
}