.article-grid {
    .article-view {
        width: 33.33%;

        &:nth-child(1) {
            width: 100%;
        }

        &:nth-child(2),
        &:nth-child(3) {
            width: 50%;
        }

        @media (max-width: 1080px) {
            width: 50% !important;
        }

        @media (max-width: 720px) {
            width: 100% !important;
        }

        @media (max-width: 480px) {
            width: 100% !important;
        }
    }
}

button,
.button {
    padding: 1rem;
    text-align: center;
}

.collection-grid {
    .collection-view {
        width: 33.33%;

        &:nth-child(1) {
            width: 100%;
        }

        &:nth-child(2),
        &:nth-child(3) {
            width: 50%;
        }

        @media (max-width: 1080px) {
            width: 50% !important;
        }

        @media (max-width: 720px) {
            width: 100% !important;
        }

        @media (max-width: 480px) {
            width: 100% !important;
        }
    }
}

input {
    background-color: white;
    color: black;
    padding: 1rem;
}

.offer-grid {
    .offer-view {
        width: 33.33%;

        &:nth-child(1) {
            width: 100%;
        }

        &:nth-child(2),
        &:nth-child(3) {
            width: 50%;
        }

        @media (max-width: 1080px) {
            width: 50% !important;
        }

        @media (max-width: 720px) {
            width: 100% !important;
        }

        @media (max-width: 480px) {
            width: 100% !important;
        }
    }
}

.profile-grid {
    .profile-view {
        width: 33.33%;

        &:nth-child(1) {
            width: 100%;
        }

        &:nth-child(2),
        &:nth-child(3) {
            width: 50%;
        }

        @media (max-width: 1080px) {
            width: 50% !important;
        }

        @media (max-width: 720px) {
            width: 100% !important;
        }

        @media (max-width: 480px) {
            width: 100% !important;
        }
    }
}

.project-grid {
    .project-view {
        width: 33.33%;

        &:nth-child(1) {
            width: 100%;
        }

        &:nth-child(2),
        &:nth-child(3) {
            width: 50%;
        }

        @media (max-width: 1080px) {
            width: 50% !important;
        }

        @media (max-width: 720px) {
            width: 100% !important;
        }

        @media (max-width: 480px) {
            width: 100% !important;
        }
    }
}

select {
    background-color: white;
    color: black;
    padding: 1rem;
}

textarea {
    padding: 1rem;
}

:root {
    --pageBackground: white;
    --pageColor: black;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
    margin-bottom: 1rem;
}