@media only screen and (max-width:768px) {
  body {
    padding: 0;
    margin: 0;
    overflow-x: hidden
  }

  h1,
  h2,
  h3 {
    font-size: 1.5em
  }

  .content2 {
    font-size: 28px !important;
    padding: 20px;
    text-align: center
  }

  #menuDropdown {
    transition: box-shadow 0.3s ease, background-color 0.3s ease
  }

  .navbar {
    height: 60px !important;
    padding: 10px
  }

  .menu-icon {
    margin-right: 20px !important;
    scale: .8
  }

  .dropdown-menu-custom {
    right: -160px;
    width: 160px;
    font-size: 14px
  }

  .naslov {
    font-size: 24px !important;
    margin: 0 auto
  }

  .swiper-slide {
    background-position: center !important;
    background-size: cover !important
  }

  div[style*="background-color:#E0D2AE"] p {
    font-size: 22px !important;
    position: static !important;
    text-align: center;
    margin: 20px auto
  }

  img[alt="slika vjencanja"] {
    width: 180px !important;
    height: 180px !important;
    top: 80vh !important;
    left: calc(50% - 90px) !important
  }

  .container1,
  .brown-container,
  .rental-container,
  .kontakt-wrapper {
    flex-direction: column !important;
    text-align: center;
    padding: 10px
  }

  .image img,
  .brown-image img {
    width: 100% !important;
    height: auto !important;
    margin: 10px 0
  }

  .text,
  .brown-text {
    padding: 10px
  }

  .button,
  .button2 {
    width: 80%;
    margin: 10px auto
  }

  .card-wrapper h2 {
    font-size: 24px
  }

  .card-container {
    flex-direction: column;
    gap: 20px
  }

  .card {
    width: 90%;
    margin: auto
  }

  .rental-images img {
    width: 100% !important;
    margin: 10px 0
  }

  .slide img {
    width: 80vw;
    height: auto
  }

  .block {
    flex-direction: column;
    text-align: center
  }

  .block img {
    width: 100%;
    height: auto
  }

  .kontakt-forma {
    width: 70%;
    padding: 10px;
    height: 400px
  }

  .kontakt-forma input,
  .kontakt-forma textarea {
    width: 90%
  }

  .kontakt-forma button {
    width: 70%
  }

  footer .row>div {
    width: 100% !important;
    margin-bottom: 20px
  }

  footer {
    padding: 20px;
    font-size: 14px
  }
}

.slike-red {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px
}

.slike-red img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  background-color: #E0D2AE;
  display: block
}

@media (max-width:768px) {
  .slike-red {
    grid-template-columns: repeat(2, 1fr)
  }
}