/* Alchemy | ver 4 */

body {
    display: grid;
    margin: 0;
}

/* - */

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    justify-self: start;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Section */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

section {
    display: grid;
    width: 100%;
}

@media(min-width: 768px) {
    section {
        grid-template-columns: auto 768px auto;
    }
}

@media(min-width: 992px) {
    section {
        grid-template-columns: auto 992px auto;
    }
}

@media(min-width: 1200px) {
    section {
        grid-template-columns: auto 1200px auto;
    }
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Workspace */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.workspace {
    display: grid;
    justify-self: center;
    width: 90%;
}

@media(min-width: 768px) {
    .workspace {
        grid-column: 2;

    }
}

/* - */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.element {
    display: grid;
    grid-gap: 16px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Col */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.col-2,
.col-3,
.col-4,
.col-5,
.col-6 {
    display: grid;
}

@media(min-width: 768px) {

    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 992px) {

    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width: 1200px) {
    .col-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .col-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .col-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Gap */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gap-0 {
    grid-gap: 0;
}

.gap-8 {
    grid-gap: 8px;
}

.gap-16 {
    grid-gap: 16px;
}

.gap-24 {
    grid-gap: 24px;
}

.gap-32 {
    grid-gap: 32px;
}

.gap-64 {
    grid-gap: 64px;
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Images */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.img {
    max-width: 100%;
    justify-self: center;
}

/* - */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* margin */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - */

.m-8 {
    margin: 8px;
}

.m-16 {
    margin: 16px;
}

.m-32 {
    margin: 32px;
}

.m-64 {
    margin: 64px;
}

/* - margin-top */

.mt-8 {
    margin-top: 8px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-64 {
    margin-top: 64px;
}

/* - margin-bottom */

.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-64 {
    margin-bottom: 64px;
}

/* - - - - */

/* - margin vertical ( top + bottom ) - */

/* - - - - */

.mv-8 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mv-16 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.mv-32 {
    margin-top: 32px;
    margin-bottom: 32px;
}

.mv-64 {
    margin-top: 64px;
    margin-bottom: 64px;
}

/* - - - - */

/* - margin-left */

/* - - - - */

.ml-8 {
    margin-left: 8px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-32 {
    margin-left: 32px;
}

.ml-64 {
    margin-left: 64px;
}

/* - margin-right */

.mr-8 {
    margin-right: 8px;
}

.mr-16 {
    margin-right: 16px;
}

.mr-32 {
    margin-right: 32px;
}

.mr-64 {
    margin-right: 64px;
}

/* - - - - */

/* - margin horizontal ( Left + Right ) - */

/* - - - - */

.mh-8 {
    margin-left: 8px;
    margin-right: 8px;
}

.mh-16 {
    margin-left: 16px;
    margin-right: 16px;
}

.mh-32 {
    margin-left: 32px;
    margin-right: 32px;
}

.mh-64 {
    margin-left: 32px;
    margin-right: 32px;
}

/* - */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - misc - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.simple {
    align-self: center;
    justify-self: start;
}

.point {
    align-self: center;
    justify-self: center;
}



/* - */

.col-2a,
.col-2b {
    display: grid;
}

@media (min-width: 768px) {
    .col-2a {
        grid-template-columns: 33% auto;
    }

    .col-2b {
        grid-template-columns: auto 33%;
    }
}

/* - */

.hide {
    display: none !important;
}

.a1 {
    align-self: start;
    justify-self: start;
}

.a2 {
    align-self: start;
    justify-self: center;
}

.a6 {
    align-self: start;
    justify-self: end;
}

.a4 {
    align-self: center;
    justify-self: start;
}

.a5 {
    align-self: center;
    justify-self: center;
}

.a6 {
    align-self: center;
    justify-self: end;
}

.a7 {
    align-self: end;
    justify-self: start;
}

.a8 {
    align-self: end;
    justify-self: center;
}

.a9 {
    align-self: end;
    justify-self: end;
}