.presto-media-popup-template {
  .components-modal__header {
    border-bottom: 1px solid #ddd;
  }

  .components-modal__content {
    display: flex;
    flex-direction: column;
    padding: 0;

    > :not(.components-modal__header) {
      flex: 1;
    }
  }

  &__grid {
    @media screen and (min-width: 780px) {
      height: 100%;
      display: grid;
      flex: 1;
      max-height: calc(100vh - 68px);
      grid-template-columns: 1fr 1fr minmax(0px, 267px);
      grid-template-rows: minmax(50px, auto) 1fr 60px;
      grid-template-areas:
        "header header sidebar"
        "main main sidebar"
        "footer footer footer";
      overflow: hidden;
    }
  }

  &__header {
    grid-area: header;
    padding: 24px 24px 12px 24px;
  }

  &__header-row {
    display: flex;
    align-items: center;

    > * {
      margin-right: 10px;
    }
  }

  &__main {
    grid-area: main;
    display: grid;
    overflow: hidden;

    .components-drop-zone__provider {
      overflow: hidden;
      display: grid;
    }

    .components-drop-zone {
      z-index: 99;
    }
  }

  &__sidebar {
    display: none;
    grid-area: sidebar;
    padding: 0 16px;
    z-index: 75;
    background: #f3f3f3;
    border-left: 1px solid #ddd;
    overflow: auto;

    @media screen and (min-width: 780px) {
      display: block;
    }

    .sidebar-content {
      padding: 16px 0;
    }
  }

  &__footer {
    grid-area: footer;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px;
  }
}