/** 
  * Due to css import issues with parallel routes we are forced to 
  * use a regular css file and import it in the page.tsx
    * This is addressed in Next 15: https: //github.com/vercel/next.js/pull/66300
  */
.profile-layout {
  background-color: var(--Main-Grey-White);
  border-radius: var(--Corner-radius-xLarge);
  display: grid;
  gap: var(--Spacing-x4);
  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
  margin: 0 calc(var(--Layout-Mobile-Margin-Margin-min) * -1);
}

@media screen and (min-width: 768px) {
  .profile-layout {
    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
    margin: 0 calc(var(--Layout-Tablet-Margin-Margin-min) * -1);
  }
}

@media screen and (min-width: 1367px) {
  .profile-layout {
    margin: 0;
  }
}