@import url(common.css);

.hero {
    width: 100vw;
    height: 80vh;
    background-image: url(../images/kuwait-tower-sharq-1600x900.jpg);
    background-attachment: fixed;
    background-position: top;
}

.promise h2 {
    font-size: 2.5rem;
    text-align: center;
    margin: 2rem;
}

.promise p {
    padding-bottom: 2rem;
    font-size: 2rem;
    text-align: center;
}

.tidbits {
    width: 100vw;
    height: 60vh;
    background-image: url(../images/background-lights.jpg);
    background-attachment: fixed;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-content: center;
    padding: 2vw;
}

.tidbits div {
    border: 1px solid blue;
    padding: 2rem;
    width: 90%;
    height: max-content;
    border-radius: 10px;
    background-color: white;
    transition: transform 0.5s;
    font-size: 1.3rem;
}

.tidbits div:hover {
    transform: translateY(-1rem);
    cursor: pointer;
}

.tidbits a {
    text-decoration: none;
}

.tidbits div:first-child {
    grid-row: 1 / 3;
}

.tidbits div:nth-child(2) {
    grid-row: 2 / 4;
}

.tidbits div:nth-child(3) {
    grid-row: 1 / 3;
}

.tidbits div:last-child {
    grid-row: 2 / 4;
}