/*==============================================================
    GRID LAYOUTS
    Sanskritigram Cultural Centre
==============================================================*/


/*==============================================================
    TWO COLUMN
==============================================================*/

.two-column-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp( 44px, 6vw, 96px );
}



/*==============================================================
    THREE COLUMN
==============================================================*/

.three-column-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap-medium);
}



/*==============================================================
    FOUR COLUMN
==============================================================*/

.four-column-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap-medium);
}



/*==============================================================
    AUTO GRID
==============================================================*/

.auto-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(280px,1fr) );
    gap: var(--grid-gap-medium);
}



/*==============================================================
    GRID UTILITIES
==============================================================*/

.grid-center {
    align-items: center;
}

.grid-start {
    align-items: start;
}

.grid-end {
    align-items: end;
}

.grid-gap-small {
    gap: var(--grid-gap-small);
}

.grid-gap-medium {
    gap: var(--grid-gap-medium);
}

.grid-gap-large {
    gap: var(--grid-gap-large);
}



/*==============================================================
    RESPONSIVE
==============================================================*/

@media (max-width:992px) {

    .three-column-layout {
        grid-template-columns: repeat(2,1fr);
    }

    .four-column-layout {
        grid-template-columns: repeat(2,1fr);
    }
}



@media (max-width:768px) {

    .two-column-layout,
    .three-column-layout,
    .four-column-layout {
        grid-template-columns: 1fr;
    }
}