/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/


/* GROUP COMPONENTS / COLUMNS
=================================================== */
/* Notes...

	- Feature columns, 3 across, housing an image and some text

*/
/* HTML Example...

    .c-columns
        .c-columns__column
            img

*/
/* GROUP COMPONENTS / COLUMNS / LAYOUT
=================================================== */
.c-columns {
    display: grid;
    /* Using this in a separate CSS file that is not processed through Libsass since it can't understand this */
    /* grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); */
    gap: var(--spacing-m);
    row-gap: var(--spacing-l-2);

    max-width: var(--max-width-2);
    margin-inline-start: auto;
    margin-inline-end: auto;
}
/* GROUP COMPONENTS / COLUMNS / SPACING
=================================================== */
.c-columns {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    padding-block-end: var(--spacing-vh-s);
}

.c-columns img {
    padding-block-end: var(--spacing-l);
    clip-path: var(--clip-top-left);
}

.o-slide ~ .c-columns {
    /* e.g. >> Home */
    padding-block-start: 0;
}
/* GROUP COMPONENTS / COLUMNS / DECORATION
=================================================== */
.c-columns p {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
}