* {
    overflow-x: hidden;
    margin: 0;
}

body {
    background-color: rgb(250, 250, 250);
}

.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 7em;
}

.sub-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.sub-title p {
    padding-bottom: .5em;
}

.title p,
.title h1,
.title a {
    font-size: 1em;
    color: black;
}

.box {
    background-color: white;
    border: solid;
    border-radius: 10px;
    border-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box p {
    font-size: 1.25em;
}



.text{
    font-size: 75%;
    margin: auto;
    overflow-y: hidden;

}

.img1,
.img-search {
    max-width: 100%;
    width: auto;
    height: auto;
}


#portrait.s1,
#portrait.s2 {
    width: 27vw;
    height: 19vw;
    overflow-y: hidden;
}


#portrait.d1,
#portrait.d2 {
    width: 27vw;
    height: 19vw;
    overflow-y: hidden;
}


#portrait.d3 {
    width: 50vw;
}


.i {
    grid-area: i;
}

.i {
    grid-area: ii;
}



.iii {
    grid-area: iii;
}


.kdm6b-grid {  
    display: grid;
    padding: 2em;
    grid-gap: 1em;
    grid-template-areas: 
    'i ii'
    'iii iii';
    overflow-y: hidden;
    place-content: center;
}


@media screen and (max-width: 825px){
    

    .kdm6b-grid {  
        display: grid;
        padding: 2em;
        grid-gap: 1em;
        grid-template-areas: 
        'i'
        'ii'
        'iii';
        overflow-y: hidden;
        place-content: center;
    }
}