/*
|--------------------------------------------------------------------------
| GRID LAYOUT
|--------------------------------------------------------------------------
*/

.amna-core-grid {
    display: grid;
    gap: 30px;
}

.amna-core-grid.columns-1 {
    grid-template-columns: repeat(1, 1fr);
}

.amna-core-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.amna-core-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.amna-core-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:1024px){

    .amna-core-grid.columns-3,
    .amna-core-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:767px){

    .amna-core-grid.columns-2,
    .amna-core-grid.columns-3,
    .amna-core-grid.columns-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/*
|--------------------------------------------------------------------------
| SWIPER FIX
|--------------------------------------------------------------------------
*/
.amna-core-swiper {
    width: 100%;
    overflow: hidden;
}

.amna-core-swiper .swiper-wrapper {
    display: flex;
}

.amna-core-swiper .swiper-slide {
    flex-shrink: 0;
    height: auto;
    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.amna-core-card {
    height: 100%;
}

/*
|--------------------------------------------------------------------------
| NAVIGATION
|--------------------------------------------------------------------------
*/

.amna-core-swiper .swiper-button-prev,
.amna-core-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
}

.amna-core-swiper .swiper-button-prev:after,
.amna-core-swiper .swiper-button-next:after {
    font-size: 18px;
}

/*
|--------------------------------------------------------------------------
| ARROWS BASE
|--------------------------------------------------------------------------
*/

.amna-core-swiper .swiper-button-prev,
.amna-core-swiper .swiper-button-next {

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all .3s ease;
}

/*
|--------------------------------------------------------------------------
| OUTSIDE
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-outside .swiper-button-prev {
    left: 0;
}

.amna-core-swiper.arrow-position-outside .swiper-button-next {
    right: 0;
}

/*
|--------------------------------------------------------------------------
| TOP LEFT
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-top-left .swiper-button-prev,
.amna-core-swiper.arrow-position-top-left .swiper-button-next {

    top: 0;
    bottom: auto;
}

.amna-core-swiper.arrow-position-top-left .swiper-button-prev {
    left: 0;
}

.amna-core-swiper.arrow-position-top-left .swiper-button-next {
    left: 50px;
}

/*
|--------------------------------------------------------------------------
| TOP CENTER
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-top-center .swiper-button-prev,
.amna-core-swiper.arrow-position-top-center .swiper-button-next {

    top: 0;
    bottom: auto;
}

.amna-core-swiper.arrow-position-top-center .swiper-button-prev {
    left: calc(50% - 45px);
}

.amna-core-swiper.arrow-position-top-center .swiper-button-next {
    left: calc(50% + 5px);
}

/*
|--------------------------------------------------------------------------
| TOP RIGHT
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-top-right .swiper-button-prev,
.amna-core-swiper.arrow-position-top-right .swiper-button-next {

    top: 0;
    bottom: auto;
}

.amna-core-swiper.arrow-position-top-right .swiper-button-prev {
    right: 50px;
    left: auto;
}

.amna-core-swiper.arrow-position-top-right .swiper-button-next {
    right: 0;
}

/*
|--------------------------------------------------------------------------
| BOTTOM LEFT
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-bottom-left .swiper-button-prev,
.amna-core-swiper.arrow-position-bottom-left .swiper-button-next {

    top: auto;
    bottom: 0;
}

.amna-core-swiper.arrow-position-bottom-left .swiper-button-prev {
    left: 0;
}

.amna-core-swiper.arrow-position-bottom-left .swiper-button-next {
    left: 50px;
}

/*
|--------------------------------------------------------------------------
| BOTTOM CENTER
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-bottom-center .swiper-button-prev,
.amna-core-swiper.arrow-position-bottom-center .swiper-button-next {

    top: auto;
    bottom: 0;
}

.amna-core-swiper.arrow-position-bottom-center .swiper-button-prev {
    left: calc(50% - 45px);
}

.amna-core-swiper.arrow-position-bottom-center .swiper-button-next {
    left: calc(50% + 5px);
}

/*
|--------------------------------------------------------------------------
| BOTTOM RIGHT
|--------------------------------------------------------------------------
*/

.amna-core-swiper.arrow-position-bottom-right .swiper-button-prev,
.amna-core-swiper.arrow-position-bottom-right .swiper-button-next {

    top: auto;
    bottom: 0;
}

.amna-core-swiper.arrow-position-bottom-right .swiper-button-prev {
    right: 50px;
    left: auto;
}

.amna-core-swiper.arrow-position-bottom-right .swiper-button-next {
    right: 0;
}