// //////////////////////////////////////////
// // CARD MODULE
// //////////////////////////////////////////

.cards-module{

	 @for $i from 1 through $card-max-cols {

        &.card-grid-#{$i} {

            li {
                width: percentage(1/$i);
                padding: $grid-gutter*0.5;

                .card{
                	padding: mm(18 * (1 - (($i - 1)/10)), 32 * (1 - ($i/10)));

                	@include break(lf){
                		padding: rem(32 * (1 - ($i/10)));
                	}
                }

				.content{
					font-size: rem(16 * (1 - ((($i - 1)/2)/10)));
				}

                .card-title{
					font-size: rem($h5-max * (1 - ((($i - 1)/2)/10)));
					margin: 0 0 0.75rem;
					line-height: 1.4;
				}
            }
        }
    }

    @for $i from 1 through 3{

    	&.card-grid-#{$i} {

    		li{
	    		
	    		@include break(tl){
	            	width: percentage(1/2);
	            }
	    		
	    		@include break(mp){
	            	width: 100%;
	            	padding: 0;

	            	& + li{
	            		margin-top: 1rem;
	            	}
	            }
	        }
    	}
    }


	&.card-grid-4 {

		li{
    		
    		@include break(tl){
            	width: percentage(1/3);
            }
    		
    		@include break(tp){
            	width: percentage(1/2);
            }
    		
    		@include break(mp){
            	width: 100%;
            	padding: 0;

            	& + li{
            		margin-top: 1rem;
            	}
            }
        }
	}

	& .module-content {
		@include module-content($cards-module-width);
	}

	.card-grid{
		@include flex;
		margin: 0;
		margin: 0 $grid-gutter*-0.5;
		list-style: none;
		padding: 0;

		width: auto;
		@include flex-wrap(wrap);

		@if $card-align == 'left'{
			@include flex-justify(flex-start);
		} @else if $card-align == 'right'{
			@include flex-justify(flex-end);
		} @else if $card-align == 'center'{
			@include flex-justify(center);
		}

		> div{
			margin: 0;

			@include break(ml){
				width: 100%;
			}
			
			& + div{

				@include break(ml){
					margin-top: $module-spacing;
				}
			}
		}

		> li{
			@include flex;
		}
	}

	.card{
		@include flex;
		@include flex-direction(column);
		width: 100%;
		background-color: inherit;
		border-radius: $card-border-radius;

		@if $card-border{
			border: 1px solid #ddd;
		}

		@if $card-shadow{
			box-shadow: 0 0 1rem rgba($black, 0.3);
		}
	}

	

	.module-image{
		width: 100%;
		margin: 0 auto;
		padding: 0 0 1.5rem;

		figure{
			padding-top: $card-image-ratio;
		}
	}

	.content{
		@include flex-value(1 1 auto);
		@include flex;
		@include flex-direction(column);

		// @if $card-content-align == 'top'{
		// 	@include flex-justify(flex-start);
		// } @else if $card-content-align == 'bottom'{
		// 	@include flex-justify(flex-end);
		// } @else if $card-content-align == 'center'{
		// 	@include flex-justify(center);
		// }

		> *{
			width: 100%;
			margin-top: 0;
		}

		.card-title{
			font-size: rem($card-title-font-size);
			margin: 0 0 0.75rem;
		}

		& > *:last-child{
			margin-bottom: 0;
		}

		.action{
			margin: auto 0 0;
		}

		.button{

			@if $card-button-full-width{
				display: block;
				text-align: center;
			}
		}
	}
}