.storage-extension {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  border-color: #d7e9e3;
  background: linear-gradient(115deg, #fff 55%, #f0f8f5);
}

.storage-extension-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(140deg, var(--teal), #256f69);
  box-shadow: 0 10px 24px rgba(49, 141, 131, .2);
  color: #fff;
  font-size: 24px;
}

.storage-extension-copy > small {
  color: var(--orange);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.storage-extension-copy h3 { margin: 5px 0 6px; }
.storage-extension-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.storage-extension-copy ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: install;
}

.storage-extension-copy li {
  counter-increment: install;
  color: #5f6d72;
  font-size: 8px;
}

.storage-extension-copy li::before {
  content: counter(install);
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  place-items: center;
  border-radius: 6px;
  background: #e7f3ef;
  color: var(--teal);
  font-weight: 850;
}

.storage-extension-copy code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #f1f4f2;
}

.storage-download {
  display: grid;
  min-width: 185px;
  padding: 12px 16px;
  border-radius: 13px;
  background: var(--orange);
  box-shadow: 0 10px 22px rgba(235, 128, 93, .2);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .18s;
}

.storage-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(235, 128, 93, .27);
}

.storage-download span { font-size: 10px; font-weight: 850; }
.storage-download small { margin-top: 4px; color: #fff3ed; font-size: 7px; }

@media (max-width: 1000px) {
  .storage-extension { grid-template-columns: 58px 1fr; }
  .storage-download { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .storage-extension { grid-template-columns: 1fr; text-align: center; }
  .storage-extension-icon { margin: auto; }
  .storage-extension-copy ol { display: grid; text-align: left; }
  .storage-download { grid-column: auto; width: 100%; }
}