@import "base.css";

body {
  background-color: var(--dark-blue);
}

main {
  max-width: 960px;
  margin: 16px auto;
  padding: 0 16px;
  font-size: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

.crummy {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--main-yellow);
  font-size: 14px;
  margin-bottom: 8px; 
}

.arrow {
  font-size: 16px;
  padding-left: 4px;
  -webkit-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
          transform: scale(-1, 1);
}


h2 {
  color: var(--main-yellow);
  text-decoration: underline;
}

.desc p {
  padding-top: 12px;
}

.images {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, auto));
  gap: 20px;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
}

.images p {
  padding-bottom: 8px;
}

img {
  border: 4px solid var(--main-gray);
  margin: 16px 0;
}

#demo {
  margin: 32px 0 16px 0;
}

#demo video {
  border: 4px solid var(--main-gray);
  height: auto;
}