This centers the .wrap item horizontally (left and right), and places 1rem of margin top and bottom. (On a large screen, your .wrap div sits in the middle of the screen because of the auto in margin: 0 auto;.)
The meaning of auto varies a lot depending on when and where it’s used. When used for left and right margin, it means put half of the empty space on the left and half on the right, thus centering the element within its container.
aspect-ratio is a new CSS property that preserves the dimensions of an element. 1/1 means that the element is forced to remain a square shape, as the horizontal and vertical dimensions have a 1:1 ratio.
To clarify a little ‘auto’ means takes up as much space as is available on that side. If you just had a margin-left:auto then the element would be pushed all the way over to the right (assuming the element was not full-width to start with). When you have left and right as auto then they both try to take up as much space as possible which ends up centering the element as they both can only have half the available space.
‘auto’ also works for vertical margins when used inside flex box and grid contexts (and absolute positioned contexts) because the height of the element will be known. auto does not work for vertical margins on static elements because there is no basis for a height context to be determined (unlike viewport width).