.flag {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 0 0 300px 0; /* Top-left corner rounded */
    height: 33.3%;
    object-fit: cover;
    border: 5px solid #000000;
  }

  .map {
    width: 33.3%;
    height: auto;
    object-fit: cover;
    filter: brightness(0);
    margin-left: 33.3%;
    margin-right: 33.3%;
    margin-top: 33.3%;
  }
  
  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }

    .profiles{
      --size: 200px;
      --img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z"; /* unfortunatly it isn't possible (as far as I know) to use custom properties in clip paths */
      --img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
      --name-txt-clr: #9c6868;
      --bg-blur: 0;         /* background image default blur */
      --bg-blur-hover: 5px; /* background image blur on hover */
      font-family: 'Ubuntu', sans-serif;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25%;
      margin: auto auto;
      width: auto;
    }
    @media (min-width: 500px){
      .profiles{
        --grid-cols: 3 ;
        margin: 23px 20%;
      }
    }

    .avatar{
      position: relative;
      width: var(--size);
      height: var(--size); /* for older browsers */
      aspect-ratio: 1;
    }
    .avatar-img {
      clip-path: path(var(--img-clip));
    }
    
    .avatar-img::before{
      content: '';
      position: absolute;
      display: blocl;
      inset: 50% 0 0 0;
      z-index: -1;
      border-radius: 20px;
      background-color: var(--bg-clr); /* fallback if image not defined as custom property */
      background-image: var(--bg-img);
      background-size: cover;
      background-position: center;
      filter: blur(var(--bg-blur));
      transition: filter 300ms ease-in-out;
    }
    .avatar-img > img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 300ms, filter 300ms;
      transform-origin: bottom;
      scale: var(--img-scale, .9);
      filter: var(--img-shadow);  
    }
    
    .avatar > p{
      text-align: right;
      font-size: .9rem;
      color: var(--name-txt-clr);
      bottom: .5rem;
      right: 0;
      translate: 0 var(--name-y,-50px);
      opacity: var(--name-opacity,0);
      z-index: -1;
      transition-name: translate, opacity;
      transition-delay: 150ms;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
    }
    
    /* all hover effects as custom properties */
    .avatar:hover{
      --img-scale: 1.2;
      --img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
      --name-y: 0;
      --name-opacity: 1;
      --bg-blur: var(--bg-blur-hover);
    }