.inverted-radius {
    --r: 20px; /* the radius */
    --s: 30px; /* size of inner curve */
    --x: 20px; /* horizontal offset (no percentange) */
    --y: 10px; /* vertical offset (no percentange) */
    
    width: 330px;
    aspect-ratio: 1;
    background: #355E3B;
    margin-top:40px;
    color:white;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
    --_d:(var(--s) + var(--r));
    mask:
      calc(100% - var(--_d) - var(--x)) 0 var(--_m),
      100% calc(var(--_d) + var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) 
       calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
      var(--_g) calc(-1*var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
  }

  .inverted-radius2 {
    --r: 20px; /* the radius */
    --s: 30px; /* size of inner curve */
    --x: 20px; /* horizontal offset (no percentange) */
    --y: 10px; /* vertical offset (no percentange) */
    
    width: 330px;
    aspect-ratio: 1;
    background: #355E3B;
    margin-top:40px;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(at var(--r) var(--r),#000 75%,#0000 0);
    --_d:(var(--s) + var(--r));
    mask:
      calc(var(--_d) + var(--x)) 0 var(--_m),
      0 calc(var(--_d) + var(--y)) var(--_m),
      radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) 
       calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
      var(--_g) calc(var(--_d) + var(--x)) 0,
      var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
  }

  
.bodyphoto {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: "Inter", sans-serif;
  }
  
  .wrapperphoto {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  @media (max-width: 400px) 
  {
    .mediaphoto {
        max-width: 300px;
        max-height: 200px;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
}

  .mediaphoto {
    max-width: 550px;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .mediaphoto img {
    max-width: 100%;
    height: auto;
  }
  
  .layerphoto {
    opacity: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 90%;
    background: #355E3B;
    color: #151e3f;
    transition: all 0.9s ease;
    p {
      transition: all 0.9s ease;
      transform: scale(0.1);
    }
  }
  
  
  .mediaphoto:hover .layerphoto {
    opacity: 0.8;
    width: 90%;
    transition: all 0.5s ease;
    p {
      transform: scale(1);
      transition: all 0.9s ease;
      color:white
    }
  }