.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.card, .smallcard {
    width: 100%;
    text-align: left;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    /* Set a fixed aspect ratio container */
    display: flex;
    flex-direction: column;
}

.card {
    max-width: 400px;
    aspect-ratio: 3/5;
}

.smallcard {
    max-width: 260px;
    aspect-ratio: 3/4.5;
}

/* Create image containers with fixed dimensions */
.card-img-container, .smallcard-img-container {
    position: relative;
    width: 100%;
    /* Set a specific aspect ratio for image containers */
    aspect-ratio: 3/4;
    overflow: hidden;
}

.card img, .smallcard img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio while filling container */
}

.smallcard img {
    /* Keep minimum dimensions while using object-fit */
    min-width: 238px;
    min-height: 281px;
}

.card p, .smallcard p {
    font-weight: bold;
    /* Prevent text from causing layout shifts */
    height: 2em; /* Approximately 2 lines of text */
    overflow: hidden;
}

.smallcard p {
    color: black;
    text-decoration: underline;
    text-align: center;
}
        
    .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 10px;
    }

    .buttons a {
        flex-basis: 32%;
        padding: 10px 15px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 16px;
        color: white;
        text-align: center;
        transition: background 0.3s ease, transform 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-red {
        background-color: #e74c3c;
    }

    .btn-green {
        background-color: #2ecc71;
    }

    .btn-blue {
        background-color: #3498db;
    }

    .buttons a:hover {
        opacity: 0.8;
        transform: scale(1.05);
    }
    .main-content {
        padding: 60px 15px; /* Duży padding u góry, mniejszy po bokach */
        max-width: 1200px; /* Ograniczenie szerokości na dużych ekranach */
        margin: 0 auto; /* Wyśrodkowanie */
        text-align: center; /* Środkowanie treści */
        font-weight: 600;
    }
 .pinterest-btn::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background-image: url('/static/assets/img/pinterest-svg.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.load-more-container {
    display: flex; /* Umożliwia flexbox */
    justify-content: center; /* Wyśrodkowanie w poziomie */
    align-items: center; /* Wyśrodkowanie w pionie, jeśli kontener ma większą wysokość */
    width: 100%; /* Kontener zajmuje całą szerokość */
    margin-top: 20px; /* Możesz dostosować margines górny, jeśli potrzebujesz */
}
.load-more-btn {
    display: flex !important; /* Umożliwia wyświetlanie zawartości w jednej linii */
    align-items: center !important; /* Wyśrodkowanie w pionie */
    justify-content: center !important; /* Wyśrodkowanie w poziomie */
    background-color: #007bff; /* Kolor tła przycisku */
    color: white; /* Kolor tekstu */
    font-size: 20px; /* Powiększenie tekstu */
    padding: 10px 20px; /* Dodatkowy padding wokół tekstu */
    border: none; /* Brak ramki */
    border-radius: 50px; /* Zaokrąglone rogi */
    cursor: pointer; /* Zmiana kursora na wskazujący */
    transition: all 0.3s ease; /* Płynna animacja */
}

.load-more-btn:hover {
    background-color: #0056b3; /* Zmiana koloru tła po najechaniu */
}

.load-more-btn span {
    margin-right: 10px; /* Odstęp między tekstem a ikoną */
}

/* Stylowanie SVG strzałki */
.arrow-down {
    margin-left: 10px; /* Odstęp po prawej stronie tekstu */
    transition: transform 0.3s ease; /* Płynna animacja rotacji */
}

/* Dodajemy animację strzałki przy najechaniu */
.load-more-btn:hover .arrow-down {
    transform: rotate(180deg); /* Obrót strzałki o 180 stopni przy najechaniu */
}

.puzzle-on-page-selector select {
    background-color: #007bff; /* Ten sam kolor co przycisk */
    color: white; /* Biały tekst */
    font-size: 20px; /* Większy tekst */
    padding: 10px 20px; /* Padding jak przycisk */
    border: none; /* Bez ramki */
    border-radius: 50px; /* Zaokrąglone rogi */
    cursor: pointer; /* Rączka przy hoverze */
    appearance: none; /* Ukrywa natywny wygląd przeglądarki */
    -webkit-appearance: none; /* Dla Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    text-align: center;
    text-align-last: center; /* Centrowanie wybranej opcji */
    transition: background-color 0.3s ease;
}

.puzzle-on-page-selector select:hover {
    background-color: #0056b3; /* Jak hover przycisku */
}
.puzzle-on-page-selector label {
    font-weight: bold;      /* Pogrubienie */
    font-size: 18px;        /* Większa czcionka – możesz zmienić np. na 20px, 1.2rem itd. */
    margin-right: 10px;     /* Odstęp od selecta */
    display: inline-block;  /* Umożliwia lepsze pozycjonowanie, jeśli trzeba */
}
@media (max-width: 768px) {
  .puzzle-on-page-selector {
    display: none;
  }
}
.only-mobile {
  display: none;
}

.only-desktop {
  display: block;
}

@media (max-width: 768px) {
  .only-mobile {
    display: block;
  }
  .only-desktop {
    display: none;
  }
}
.mobile-button {
  display: block;
  width: 100%;
  margin: 10px 0;
  text-align: center;
  font-size: 18px;
}