.pg-grid-wrapper-5e7ba282 {
    width: 100%;
}

.pg-grid-5e7ba282 {
    display: grid;
    width: 100%;
}

.pg-card-5e7ba282 {
    position: relative;
    overflow: hidden;
}

.pg-link-wrapper-5e7ba282 {
    text-decoration: none !important;
    display: block;
}

.pg-image-container-5e7ba282 {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Aspect ratios classes mapped via prefix_class */
.pg-aspect-4-3 .pg-image-container-5e7ba282 {
    aspect-ratio: 4/3;
}
.pg-aspect-16-9 .pg-image-container-5e7ba282 {
    aspect-ratio: 16/9;
}
.pg-aspect-1-1 .pg-image-container-5e7ba282 {
    aspect-ratio: 1/1;
}
.pg-aspect-auto .pg-image-container-5e7ba282 {
    aspect-ratio: auto;
}

.pg-img-5e7ba282 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.pg-card-5e7ba282:hover .pg-img-5e7ba282 {
    transform: scale(1.08);
}

.pg-info-5e7ba282 {
    padding-top: 15px;
}

.pg-title-5e7ba282 {
    margin: 0 0 5px 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.pg-meta-5e7ba282 {
    font-size: 0.875rem;
}

/* Base Hover Button Styling */
.pg-hover-btn-5e7ba282 {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    display: inline-block;
    white-space: nowrap;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mobile & Tablet Hover Centering */
@media (max-width: 1024px) {
    .pg-hover-btn-5e7ba282 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.7);
    }
    
    /* Reveal button on touch/hover of the card/image container on mobile & tablet */
    .pg-card-5e7ba282:hover .pg-hover-btn-5e7ba282,
    .pg-card-5e7ba282:active .pg-hover-btn-5e7ba282,
    .pg-image-container-5e7ba282:hover .pg-hover-btn-5e7ba282,
    .pg-image-container-5e7ba282:active .pg-hover-btn-5e7ba282 {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Desktop Cursor-tracking Hover */
@media (min-width: 1025px) {
    .pg-hover-btn-5e7ba282 {
        top: 0;
        left: 0;
        transform: translate(-50%, -50%) scale(0.7) rotate(-12deg);
    }
    
    .pg-image-container-5e7ba282.is-active .pg-hover-btn-5e7ba282 {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}