/*#Base classes*/
.center {
    text-align: center;
}

.container {
    width: min(90rem, 100vw - var(--space-xl));
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.flow>*+* {
    margin-top: var(--flow-space, 1em);
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--wrapper-max-width, 90rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative
}

.section {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}

.big-section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.bottom-section {
    padding-bottom: var(--space-l);
}

.big-bottom-section {
    padding-bottom: var(--space-3xl);
}

/*#Grid classes*/
.grid {
    display: grid;
    grid-gap: var(--space-s-l);
    grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 21rem), 1fr))
}

.grid[data-rows=masonry] {
    align-items: start;
    grid-template-rows: masonry;
}

.grid[data-layout="50-50"] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}


.features {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(20rem, 32%, 25rem);
    --gutter: var(--space-l-xl);
    --flow-space: var(--space-s);
    padding: 0;
}

/*#Top classes*/
.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.8)),
        url('../images/cyber_temp.jpg');
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media screen and (max-width: 1200x) {
    .hero {
        background-attachment: scroll;
    }
}

.hero-wrapper {
    max-width: var(--wrapper-max-width, 90rem);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative
}

.hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xl-2xl);
}

.hero-content>* {
    flex-grow: 1;
    flex-basis: 250px;
}

.hero-content img {
    height: min(40rem, 100vw - var(--space-xl));
    object-fit: cover;
}

@media screen and (max-width: 1000px) {
    .hero-content {
        flex-direction: column-reverse;
        gap: 0;
    }
}

.mid-background-one {
    background-color: rgb(21, 39, 39);
}

.mid-background-two {
    background-color: rgb(23, 49, 40);

}

/*#Mid classes*/
.mid-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl-2xl);
}

.mid-container>* {
    flex-grow: 1;
    flex-basis: 250px;
}

.mid-container-one {}

.mid-container-two {}

@media screen and (max-width: 1000px) {
    .mid-container-one {
        flex-direction: column;
        gap: 0;
    }

    .mid-container-two {
        flex-direction: column-reverse;
        gap: 0;
    }
}

.mid-container img {
    height: min(40rem, 100vw - var(--space-xl));
    object-fit: cover;
}

/*#Footer*/

.footer-background {
    background-color: black;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl-3xl);
}

.footer-container>* {
    flex-grow: 1;
    flex-basis: 350px;
}

.footer-smaller-text {}

.footer-smaller-text p {
    font-size: var(--step-0);
}

.footer-smaller-text a {
    font-size: var(--step-0);
}