:root {
    --header: #98CA32;
    --nav: #59761E;
    --main: #263409;
    --font_light: #cfe2e2;
    --passpartout: #F8F8F8;
    --frame: #000000;
  }
/*reset:*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*general stylings (mobile first, xs = < 576px):*/
body {
    font-family: Verdana, sans-serif;
    font-size: 1.13rem;
    letter-spacing: 0.1rem;
    line-height: 1.9rem;
    background-color: var(--main);
    color: var(--font_light);
}
  
a {
      font-size: 2rem;
      position: absolute;
      top:0;
      left:0;
      color: var(--font_light);
      font-weight: bold;
      text-decoration: none;
      padding: 1rem;
      border: 2px solid var(--nav);
      border-radius: 50%;
}

.container {
    display: grid;
    width: calc(100vw - 40px);
    overflow: hidden;
    gap: 10px; /*gap shorthand = row-gap & column-gap*/
    margin: 20px auto;
    min-height: calc(100vh - 40px); /*screen height minus space for container-margin bottom*/
}

.item {
    padding: 20px;
}

img.ich {
    width: min(100%, 300px);
    height: auto;
    border-radius: 50%;
    margin: auto;
}

.text {
    width: 80%;
    margin: auto;
}

span {
    font-weight: 900;
}

/*small, >= 576px*/
@media screen and (min-width:576px) {
    img.ich {
        width: min(90%, 400px);
    }
}

/*medium, >= 768px*/
@media screen and (min-width:768px) {
    img.ich {
        width: min(80%, 500px);
    }

    body {
        font-size: 1.2rem;
    }
}

/*large, >= 992px*/
@media screen and (min-width:992px) {
    img.ich {
        width: min(70%, 500px);
    }

    body {
        font-size: 1.3rem;
    }
}

/*xl, >= 1200px*/
@media screen and (min-width:1200px) {
    img.ich {
        width: min(70%, 550px);
    }

    body {
        font-size: 1.4rem;
    }
}

/*2xl, >= 1400px*/
@media screen and (min-width:1400px) {
    img.ich {
        width: min(70%, 600px);
    }

    body {
        font-size: 1.5rem;
    }
}

/*small & landscape*/
@media screen and (min-width:576px) and (orientation:landscape) {
    body {
        font-size: 1.2rem;
    }

    .container {
        grid-template-columns: 40% 60%;
        grid-template-rows: 60% 40%;
        max-width: 1200px;
        place-content: center;
    }

    img.ich {
        width: min(90%, 600px);
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    p {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    address {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
}

/*medium & landscape*/
@media screen and (min-width:768px) and (orientation:landscape) {
    body {
        font-size: 1.2rem;
    }

    img.ich {
        width: min(80%, 600px);
        grid-column: 1/2;
        grid-row: 1/3;
    }

    p {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    address {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

}