/*#region image*/

picture {
    margin: 0;
    padding: 0;
    line-height: 0;
}

img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/*#endregion*/

/*#region video*/

video {
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--background-secondary-color);
    box-shadow: none;
}

.video-player {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--background-secondary-color);
    box-shadow: none;
}

/*#endregion*/

/*#region audio*/

audio {
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--background-secondary-color);
}

/*#endregion*/

/*#region pdf*/

.pdf {
    width: 100%;
    aspect-ratio: 4/3;
    border: none;
    border-radius: var(--border-radius);
}

/*#endregion*/

/*#region embedded-project*/

.embedded-project {
  aspect-ratio: 16 / 9;
  background-color: var(--background-secondary-color);
  border-radius: var(--border-radius);
  position: relative;

  .frame {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    justify-content: center;
    align-content: center;
    overflow: hidden;
    border: none;

    > * {
      display: block;
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}

/*#endregion*/