:root {
  --alfa: #ef3124;
  --alfa-soft: #fff1ef;
}

.site-shell .offer-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 64px);
  align-items: start;
}

.site-shell .offer-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  column-gap: clamp(34px, 7vw, 104px);
  align-items: end;
}

.site-shell .offer-copy .section-kicker,
.site-shell .offer-copy h2 {
  grid-column: 1;
}

.site-shell .offer-copy > p:not(.section-kicker) {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 62ch;
  margin: 0;
}

.site-shell .offer-copy-list {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-top: 32px;
  border-block: 1px solid var(--shell-line);
}

.site-shell .offer-copy-list li {
  min-width: 0;
  padding: 18px clamp(18px, 3vw, 32px) 18px 0;
}

.site-shell .offer-copy-list li + li {
  padding-left: clamp(18px, 3vw, 32px);
  border-left: 1px solid var(--shell-line);
}

.site-shell .bank-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: clamp(16px, 2.4vw, 28px);
  width: 100%;
}

.site-shell .bank-offer {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-column: auto;
  min-width: 0;
  height: 100%;
}

.site-shell .bank-banner-frame {
  display: grid;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-items: center;
  background: #7c3aed;
}

.site-shell .bank-banner-frame .bank-banner {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  min-height: 0;
}

.site-shell .bank-offer--alfa .bank-banner-frame {
  background: #ef3124;
}

.site-shell .bank-offer--alfa .bank-banner {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: #ef3124;
}

.site-shell .bank-offer:not(.bank-offer--alfa) .bank-banner {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.site-shell .bank-offer-body {
  display: flex;
  flex-direction: column;
}

.site-shell .bank-offer-body > .button {
  margin-top: auto;
}

.site-shell .bank-mark--alfa {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--alfa);
  font-size: 1.35rem;
  font-weight: 900;
}

.site-shell .bank-offer--alfa {
  border-color: color-mix(in srgb, var(--alfa) 34%, var(--shell-line));
}

.site-shell .bank-offer--alfa:hover {
  box-shadow: 0 24px 60px rgb(115 28 18 / 0.14);
}

.site-shell .bank-offer--alfa .bank-offer-meta div {
  background: var(--alfa-soft);
}

.site-shell .bank-offer--alfa .button-primary {
  color: #fff;
  background: var(--alfa);
  box-shadow: none;
}

.site-shell .result-bank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.site-shell .result-bank-grid .result-bank-card {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.site-shell .result-bank-card--alfa {
  border-color: color-mix(in srgb, var(--alfa) 34%, #e2e8f0);
  background: #fff9f8;
  box-shadow: 0 18px 50px rgb(115 28 18 / 0.1);
}

.site-shell .result-bank-card--alfa .bank-status {
  color: #bc2116;
}

.site-shell .result-bank-card--alfa .result-limits {
  background: var(--alfa-soft);
}

.site-shell .result-bank-card--alfa .result-limits li::before {
  background: var(--alfa);
}

.site-shell .result-bank-card--alfa .button-primary {
  margin-top: auto;
  background: var(--alfa);
  box-shadow: none;
}

@media (max-width: 1080px) {
  .site-shell .offer-copy {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .site-shell .offer-copy .section-kicker,
  .site-shell .offer-copy h2,
  .site-shell .offer-copy > p:not(.section-kicker) {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .site-shell .offer-copy-list,
  .site-shell .bank-offer-grid,
  .site-shell .result-bank-grid {
    grid-template-columns: 1fr;
  }

  .site-shell .offer-copy-list li,
  .site-shell .offer-copy-list li + li {
    padding: 16px 0;
    border-left: 0;
  }

  .site-shell .offer-copy-list li + li {
    border-top: 1px solid var(--shell-line);
  }
}