.marketing-assets-preview {
  overflow: hidden;
  margin-block: 0 var(--s5);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.marketing-assets-preview__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-assets-preview__badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-assets-preview__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
}

.marketing-assets-preview__badge--colour {
  background: linear-gradient(145deg, #e3f5ff, #f8fcff 65%);
}

.marketing-assets-preview__badge--white {
  background: #012a5f;
}

.marketing-assets-preview__badge .eyebrow {
  align-self: flex-start;
  margin: 0;
  color: var(--secondary);
}

.marketing-assets-preview__badge--white .eyebrow {
  color: #fff;
}

.marketing-assets-preview__badge img {
  display: block;
  width: min(100%, 13rem);
  height: auto;
}

.marketing-assets-preview__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 13rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.marketing-assets-preview__logo--colour {
  background: linear-gradient(145deg, #e3f5ff, #f8fcff 65%);
}

.marketing-assets-preview__logo--white {
  background: #012a5f;
}

.marketing-assets-preview__logo .eyebrow {
  align-self: flex-start;
  margin: 0;
  color: var(--secondary);
}

.marketing-assets-preview__logo--white .eyebrow {
  color: #fff;
}

.marketing-assets-preview__logo img {
  display: block;
  width: min(100%, 30rem);
  height: auto;
}

.marketing-assets-preview__palette {
  padding: var(--s3);
}

.marketing-assets-preview__label {
  margin: 0 0 var(--s2);
  font-weight: 750;
  color: var(--primary);
}

.marketing-assets-preview__colours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
}

.marketing-assets-preview__colour {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  font-size: .9rem;
}

.marketing-assets-preview__colour code {
  color: var(--muted);
  font-size: .85rem;
}

.marketing-assets-preview__swatch {
  display: block;
  height: 2.75rem;
  margin-bottom: .4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.marketing-assets-preview__swatch--navy { background: #012a5f; }
.marketing-assets-preview__swatch--blue { background: #009cfd; }
.marketing-assets-preview__swatch--hill-blue { background: #0088da; }
.marketing-assets-preview__swatch--white { background: #fff; }

@media (max-width: 44rem) {
  .marketing-assets-preview__badges { grid-template-columns: 1fr; }
  .marketing-assets-preview__logos { grid-template-columns: 1fr; }
}

@media (max-width: 27rem) {
  .marketing-assets-preview__colours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .marketing-assets-preview__palette { padding: var(--s2); }
  .marketing-assets-preview__colour { font-size: .8rem; }
  .marketing-assets-preview__colour code { font-size: .75rem; }
}