.catalog {
    display: grid;
       grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1rem;
    padding: 1rem !important;
    justify-items: center
}

.catalog-item {
    background-color: white !important;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 25.625rem !important;
    overflow: hidden;
    width: 100%;
    border-radius: 0.875rem;
    box-shadow: 1px 0px 3px 0px rgba(128, 128, 128, 0.272) !important;
}
.catalog-item__image-container {
    display: block;
    width: calc(100% + 2rem);
    aspect-ratio: 4 / 3;
    margin: -1.25rem -1rem 0rem;
    border-radius: 0.625rem 0.625rem 0 0;
    overflow: hidden;
}
.catalog-item__image-container img {
        -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.catalog-item__image-container:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
}
/* <div class="catalog-item">
    <a class="catalog-item__image-container" href="[[~[[+id]]]]">
        <img src="[[+og_image]]" alt="[[+pagetitle]]" class="catalog-item__image" loading="lazy">
    </a>
    <div class="catalog-item__content">
        <h2 class="catalog-item__title"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
        <p class="catalog-item__description">[[+description]]</p>
    </div>
    <p class="catalog-item__publish-date">[[+publishedon:date=`%d.%m.%Y`]]</p>
</div> */

.catalog-item__content {
    height: 100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    padding: 1.25rem 1.25rem 0rem 1.25rem;
}
.catalog-item__image {
   /*  width: 100%;
   aspect-ratio: 4/3 !important;
   border-radius: 0.375rem 0.375rem 0 0 ; */
    
}
.catalog-item a {
    margin-bottom: 12px !important;
    font-weight: 500;
     text-align: center !important;
}
.catalog-item h2 {
    text-align: center !important;
    display: -webkit-box;
    padding: 0rem 1rem;
    padding-bottom: 2rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
/*       border: red solid; */
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
                 /* Ensure pseudo-element positioning */
}


.catalog-item__description {
    height: 100% !important;
    display:flex;
    flex-direction: column;
/*     align-items: end; */
    justify-content: space-between;
}
.catalog-item__description {
    width: 100%;
    margin-bottom: 0;
}
.catalog-item h2 a {
    text-align: center !important;
    display: inline;/* Ensure long words break instead of overflowing */
}


h1 {
    text-align: center;
}
.catalog-item__publish-date {
    width: calc(100% - 2rem);
    text-align: end;
    color: grey;
    margin-bottom: 0px;
    margin: 0rem 1rem 1rem 1rem !important;
}

.grid {
    display: grid !important;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 0.875rem;
   column-gap: 0.875rem;
}

@media (width <= 768px) {
    .catalog-item h3 a{
    text-align: center !important;
    margin: 0 auto;
}
    
}