﻿.sa-grid {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 1.6rem;
}

.sa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 6rem;
}

.sa-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 4.8rem;
}

.sa-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1.6rem;
}

.sa-grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 3.6rem;
}

.sa-grid-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 2.6rem;
}

.sa-grid-span-2 {
    grid-column: span 2;
}

.sa-grid-span-3 {
    grid-column: span 3;
}

.sa-grid-span-4 {
    grid-column: span 4;
}

.sa-grid-span-5 {
    grid-column: span 5;
}

.sa-grid-item {
    text-align: center;
    align-self: center;
    justify-self: center;
}

.sa-grid-item-left {
    justify-self: left;
    text-align: left;
    width: 100%;
}

.sa-grid-item-right {
    justify-self: right;
    text-align: right;
    width: 100%;
}

.grid-item-img {
    width: 24rem;
    height: 24rem;
}

.grid-img {
    width: 100%;
    max-height: 48rem;
    align-self: center;
    justify-self: center;
}

.grid-text {
    align-self: center;
    justify-self: center;
}

.sa-grid-vertical-split {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b";
}

.sa-grid-vertical-split-top {
    grid-area: a;
}

.sa-grid-vertical-split-bottom {
    grid-area: b;
    align-self: end;
}

@media only screen and (max-width: 700px) {
    .sa-grid {
        grid-gap: 0rem;
    }

    .sa-grid-2, .sa-grid-3, .sa-grid-4, .sa-grid-5, .sa-grid-6, .container-notification {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: 1rem;
    }

    .sa-grid-item-left {
        justify-self: center;
        text-align: center;
    }

    .sa-grid-item-right {
        justify-self: center;
        text-align: center;
    }

    .sa-grid-span-2, .sa-grid-span-3, .sa-grid-span-4, .sa-grid-span-5 {
        grid-column: span 1;
    }


}
