.main {
    background-color: var(--farallon-background-white);
    max-width: var(--farallon-main-width, 1000px);
    @include centered;
    min-height: 100vh;
    position: relative;

    body:not(.is-cleanMode) & {
        &:after {
            aspect-ratio: 1/3;
            background-image: linear-gradient(
                to right,
                var(--farallon-griedent-start),
                var(--farallon-griedent-end)
            );
            border: 0;
            border-radius: 9999px;
            bottom: calc(100% - 100px);
            filter: blur(44px);
            opacity: 0.2;
            position: absolute;
            right: 0;
            left: 0;
            content: '';
        }
    }
}

.site--main {
    padding: 50px 80px;
    min-height: 60vh;

    &__map {
        padding-left: 0;
        padding-right: 0;
    }

    .markerPro--posts {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    @media (max-width: 820px) {
        padding: 40px;
    }

    @media (max-width: 768px) {
        padding: 3.5%;
    }
}
