@import "_variables.scss";

grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
    place-items: stretch;

    item {
        padding: 0;
        border: 1px solid $border-light;
        border-radius: 8px;

        h2 {
            background-color: $background-light;
            margin:0;
            padding:1rem 1rem .5rem 1rem;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;

            a {
                color:$color-text;
                text-decoration: none;
            }
        }

        content {
            display: flex;
            flex-direction: row;
            align-items: stretch;

            p {
                padding:.5rem;
            }

            img {
                margin:.5rem;

                &.stroke {
                    border:1px solid $border-light;
                }
            }
        }
    
    }

    &.border_none {
        item {
            border:none;
        }
    }

    &.mt-1 {
        margin-top: 1rem;
    }

    &.grid-single {
        grid-template-columns: 1fr;
    }

    &.grid-triple {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

@include media-medium {
    grid {
        grid-template-columns: 1fr;
    }
}