---
const { classes, id, isColumn, Full, Centered, ...rest } = Astro.props;
---

<div class:list={["wrapper", {col: isColumn}, {full: Full}, classes]} id={id} {...rest}>
    <slot/>
</div>

<style type="text/css">
    .wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: var(--width-default);
        height: 100%;
        margin: 0 auto;

        &.full {
            width: 95%;
        }

        &.col {
            flex-direction: column;
            align-items: stretch;
        }
    }

    @media screen and (max-width: 768px) {
        .wrapper {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>