/* Frontend Grid Gallery Styles */
.cgrid-gallery {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.cgrid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 6), 1fr);
    gap: var(--grid-gap, 20px);
    margin: 0 auto;
}

.cgrid-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.cgrid-item a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.cgrid-title {
    position: absolute;
    top: 15%;
    left: 50%;
    font-family: 'Grad' !important;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 15px;
    text-align: center;
    z-index: 2;
    width: 100%;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.cgrid-image {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
}

.cgrid-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: all 0.4s ease;
}

@media (min-width: 481px) {
    .grid-item-1x2 .cgrid-image img {
        max-width: none;
        position: absolute;
        bottom: 0;
        padding: 20px;
    }
}

/* Grid Item Sizes and Animations */
.grid-item-1x1 {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
}

.grid-item-2x1 {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 2/1;
    height: 100%;
    width: 100%;
}

.grid-item-1x2 {
    grid-column: span 1;
    grid-row: span 2;
    aspect-ratio: 1/2;
    height: 100%;
    width: 100%;
}

.grid-item-2x2 {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
}


/* Animations for different sizes */
.grid-item-2x1 .cgrid-image,
.grid-item-2x2 .cgrid-image,
.grid-item-1x1 .cgrid-image {
    transform: translateY(30%);
}

.grid-item-1x2 .cgrid-image {
    transform: translateX(0);
}

.grid-item-1x2:hover .cgrid-image {
    transform: translateX(-90%);
}

@media (min-width: 481px) {
    .grid-item-2x1:hover .cgrid-image,
    .grid-item-1x1:hover .cgrid-image,
    .grid-item-2x2:hover .cgrid-image {
        transform: translateY(0);
    }

    /* Common Hover Effects */
    .grid-item-1x1:hover .cgrid-title,
    .grid-item-1x1.preview-hover .cgrid-title,
    .grid-item-2x1:hover .cgrid-title,
    .grid-item-2x1.preview-hover .cgrid-title,
    .grid-item-2x2:hover .cgrid-title,
    .grid-item-2x2.preview-hover .cgrid-title {
        opacity: 0;
    }

    .grid-item-1x1:hover .cgrid-image img,
    .grid-item-2x1:hover .cgrid-image img,
    .grid-item-2x2:hover .cgrid-image img {
        transform: scale(0.9);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cgrid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-item-2x1,
    .grid-item-2x2 {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 2/1;
    }

    .grid-item-1x2 {
        grid-column: span 1;
        grid-row: span 2;
        aspect-ratio: 1/2;
    }

    .grid-item-1x2 .cgrid-image img {
        padding: 100px 0 40px 0;
        height: 95%;
        transform: translateX(3%);
        max-width: initial;
    }

    .grid-item-1x2:hover .cgrid-image {
        transform: translateX(-98%);
    }
}