/* Outer div to control overall size */
    .outer-container {
      width: 100%;               /* Takes full width of the parent */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Inner circle div that contains the image */
    .inner-circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;        /* Make it circular */
      overflow: hidden;          /* Hide overflow to maintain the circle */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Image styling */
    .circular-image {
      width: 100%;
      height: 100%;
      object-fit: cover;         /* Ensures the image covers the inner circle */
    }

.circle{
	 aspect-ratio: 1;           /* Maintain square aspect ratio */
}

.landscape{
	
	aspect-ratio: 4 / 3;
} 

.landscape-wide{
	aspect-ratio: 16 / 9;
}

.ultrawide{
	aspect-ratio: 21 / 9;
}

.portrait{
	aspect-ratio: 3 / 4;
}

.portrait-tall{
	aspect-ratio: 9 / 16;
}

.ultratall{
	aspect-ratio: 9 / 21;
}