Panel Component

<div>
    <div class="spr-panel"> I am a panel. I'm literally just an empty container. Hi. </div><br>
    <div class="spr-panel spr-panel-mobile"> Mobile full-width panel. </div><br>
</div>

@import 'components/panel';

@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-icon-rotate-90 {
  transform: rotate(90deg);
}

.spr-icon-rotate-180 {
  transform: rotate(180deg);
}

.spr-icon-rotate-270 {
  transform: rotate(270deg);
}

.spr-panel {
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #e4e5e7;
  border-radius: 0.125rem;
}

@media only screen and (max-width: 37.49rem) {
  .spr-panel {
    padding: 0.9375rem 0.9375rem;
  }
}

@media only screen and (min-width: 37.5rem) and (max-width: 74.99rem) {
  .spr-panel {
    padding: 0.9375rem 0.9375rem;
  }
}

@media only screen and (min-width: 75rem) {
  .spr-panel {
    padding: 1.4375rem 1.4375rem;
  }
}

@media only screen and (max-width: 37.49rem) {
  .spr-panel.spr-panel-mobile {
    margin: 0 -1rem;
    padding: 1rem;
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
  }
}