@import "./general.css";
@import "./header.css";
@import "./footer.css";
@import "./cards.css";



/* Small Screen */
.main-container {
    min-height: calc(100vh - var(---footer-height));
    background-image: url("//i.etsystatic.com/22977314/r/il/6a7937/5235927172/il_fullxfull.5235927172_ih4x.jpg");
    background-color: var(---white);
    background-repeat: repeat-y;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;


}

.card-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 50px;
}

.opacity {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(---secondary-color);
    opacity: 0.2;
}

/* Big Screen. */
@media screen and (min-width:700px) {
    .main-container {
        background-image: url("//i.etsystatic.com/36737071/r/il/b837c4/4151190219/il_fullxfull.4151190219_hba7.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .card-container {
        grid-template-columns: 1fr 1fr;
    }

}

@media screen and (min-width:1200px) {
    .main-container {
        background: rgb(35, 95, 133);
        background: linear-gradient(0deg, var(---tertiary-color) 4%, rgba(254, 254, 254, 0.9) 90%);
        background-attachment: fixed;
    }

    .card-container {
        grid-template-columns: 1fr 1fr 1fr;
    }

}