*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
@font-face {
    font-family: 'DMSans';
    src: url(./assets/fonts/DMSans-Italic-VariableFont_opsz\,wght.ttf);
    font-style: italic;
    font-weight: normal;
}
body {
    background-color: rgb(228, 226, 226);
    font-family: 'DMSans', sans-serif;
    margin: 0;
    padding: 0;
}
body h2 {
    font-weight: 700;
}
.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(10,1fr);
    gap: 24px;
    height: 100vh;
    /* width: 100%; */
    max-width: 1300px;
    margin: auto;
    padding: 30px 100px;
    box-sizing: border-box;
    grid-template-areas:
        "sixth first first third"
        "sixth first first third"
        "sixth first first third" 
        "sixth eighth second third"
        "sixth eighth second third"
        "seventh eighth second third"
        "seventh fifth fourth fourth"
        "seventh fifth fourth fourth"
        "seventh fifth fourth fourth"
        "seventh fifth fourth fourth";        
}
/* Example: style for images inside cards */
.container img {
    max-width: 90%;
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    object-fit: cover;
}
.container div{
    color: black;
    border-radius: 15px;
    /* overflow: hidden; */
    text-align: center;
    object-fit: cover;
    padding: 20px;
}
/* Assign grid areas */
.first h1,.fourth h2 {
    color: white;
}
.first    { grid-area: first;    background: #7c5cff; color: #ffffff; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.second {
    grid-area: second;
    background: #f7c873;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;      /* Push content to the bottom */
    justify-content: flex-end;  /* Push content to the bottom */
    padding: 0;
    height: 100%;               /* Take full grid cell height */
    min-height: 280px;          /* Adjust as needed */
    overflow: hidden;           /* Hide overflow of image */
    position: relative;
}
.third    { grid-area: third;    background: #e5d7fa; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fourth   { grid-area: fourth;   background: #7c5cff; color: #fff; border-radius: 18px; display: flex; align-items: center; justify-content: center;}
.fifth    { grid-area: fifth;    background: #fff; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sixth    { grid-area: sixth;  border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: hsl(31, 66%, 93%);}
.seventh  { grid-area: seventh;  background: #f7c873; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.eighth   { grid-area: eighth;   background: #fff; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.fourth img {
    width: 50%;
    padding: 20px;
    object-fit: contain;
}
.second {
    overflow: hidden;

}
.second img {
    margin: auto;
    /* height: 100%; */
    width: 100%;
}
.second h2, .second p {
    position: relative;
    z-index: 1;
    margin: 24px;
    color: #222;
}
.fifth h2 {
    font-size: 3em;
    z-index: 999;
}


/* Responsive adjustments */
@media (max-width: 1100px) {
    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(8, auto);
        grid-template-areas:
            "first first"
            "sixth third"
            "seventh second"
            "eighth fourth"
            "fifth fourth"
            ". ."
            ". ."
            ". .";
        height: auto;
        width: 100vw;
        padding: 12px 0px 20px;
    }
}

@media (max-width: 700px) {
    .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "first"
            "second"
            "third"
            "fourth"
            "fifth"
            "sixth"
            "seventh"
            "eighth";
        gap: 16px;
        padding: 8px;
        height: auto;
        width: 100vw;
    }
    .container > div {
        width: 100%;
        min-height: 180px;
    }
}