/*
 * Shared outer frame geometry for Thunder Hollow section pages and
 * single-page sections. Page-specific CSS owns colors and inner layouts.
 */

:root{
  --thunder-section-frame-width:min(
    var(--single2-outer-frame-width, 80vw),
    calc(100% - (var(--single2-outer-frame-gap, 75px) * 2))
  );
  --thunder-section-frame-width-narrow:min(95vw, 1400px);
  --thunder-section-frame-radius:var(--thunder-radius-outer-frame, var(--single2-outer-frame-radius, 34px));
}

.videos2Frame,
.photosFrame,
body.streamingPage .simpleFrame,
.aboutFrame,
#videos .videos2Frame,
#photos .photosFrame,
#streaming .simpleFrame,
#about .aboutFrame{
  width:var(--thunder-section-frame-width);
  margin-left:auto;
  margin-right:auto;
  border-radius:var(--thunder-section-frame-radius);
}

@media (max-width:1180px){
  .videos2Frame,
  .photosFrame,
  body.streamingPage .simpleFrame,
  .aboutFrame,
  #videos .videos2Frame,
  #photos .photosFrame,
  #streaming .simpleFrame,
  #about .aboutFrame{
    width:var(--thunder-section-frame-width-narrow) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:780px){
  .videos2Frame,
  .photosFrame,
  body.streamingPage .simpleFrame,
  .aboutFrame,
  #videos .videos2Frame,
  #photos .photosFrame,
  #streaming .simpleFrame,
  #about .aboutFrame{
    border-radius:24px;
  }
}