@import url('https://fonts.googleapis.com/css2?family=Alkalami&family=Playfair+Display&display=swap');

/* (page width(vm/100))/96 = pt/72 */

img {
    width: 100%;
    height: 100%;
    background-color: white;
}

section {
    grid-column: 1/6;
    grid-row: 1/6;
    aspect-ratio: 5/5;
    margin: 0;
    padding: 0;
    max-width: 1000px;
}

.center {

    box-sizing: content-box;
    text-align: center;
    display: flex;
    justify-content: center;
    aspect-ratio: 10/5;
}



.myGrid {
    display: grid;
    max-width: 1000px;
    max-height: 500px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.main {
    text-align: left;
    max-width: 1000px;
    grid-column: 3/10;
    grid-row: 2/4;
    padding: 5px;
    font-family: 'Playfair Display', serif;
    font-size: 9vw;
}

.sub {
    grid-column: 6/9;
    grid-row: 4/6;
    text-align: left;
    padding: 5px;
    font-size: 7.5vw;
    font-family: 'Alkalami', serif;
    color: red;
}

.box {
    background-color: lightgrey;
    grid-column: 6/10;
    grid-row: 1/6;
    aspect-ratio: 4/5;
}

@media screen and (min-width: 1000px) {

    .main {
        font-size: 67.5pt;
        width: 600px;
    }

    .sub {
        font-size: 56.25pt;
    }

    img {
        width: 500px
    }
}