/* Detailed feature pages: one large feature per row */
.showcase .grid,
.showcase .security-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 120px !important;
}

.showcase .card,
.showcase .security-card {
  grid-column: 1 / -1 !important;
  min-height: 500px !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .76fr) minmax(0, 1.44fr) !important;
  align-items: stretch;
}

.showcase .card .copy,
.showcase .security-card .copy {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 58px 48px !important;
}

.showcase .card .copy p,
.showcase .security-card .copy p {
  max-width: 470px;
}

.showcase .card .visual,
.showcase .card .diagram,
.showcase .security-card .screen {
  align-self: end !important;
  box-sizing: border-box;
  width: 100% !important;
  height: calc(100% - 54px) !important;
  min-height: 420px !important;
  margin: 54px 0 0 !important;
  flex: none !important;
}

@media (max-width: 900px) {
  .showcase .grid,
  .showcase .security-grid {
    gap: 64px !important;
  }
  .showcase .card,
  .showcase .security-card {
    min-height: 700px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .showcase .card .copy,
  .showcase .security-card .copy {
    justify-content: flex-start;
    padding: 38px 30px 26px !important;
  }

  .showcase .card .visual,
  .showcase .card .diagram,
  .showcase .security-card .screen {
    align-self: end !important;
    width: calc(100% - 24px) !important;
    height: 410px !important;
    min-height: 410px !important;
    margin: 18px 0 0 24px !important;
  }
}

@media (max-width: 560px) {
  .showcase .card,
  .showcase .security-card {
    min-height: 650px !important;
  }

  .showcase .card .visual,
  .showcase .card .diagram,
  .showcase .security-card .screen {
    height: 350px !important;
    min-height: 350px !important;
  }
}


/* Alternating detail rows */
.showcase .grid > .card:nth-child(even) .copy,
.showcase .security-grid > .security-card:nth-child(even) .copy {
  grid-column: 2;
  grid-row: 1;
}

.showcase .grid > .card:nth-child(even) .visual,
.showcase .grid > .card:nth-child(even) .diagram,
.showcase .security-grid > .security-card:nth-child(even) .screen {
  grid-column: 1;
  grid-row: 1;
  margin: 54px 0 0 !important;
  border-right: 2px solid var(--mint, #4fdbe2);
  border-left: 0;
  border-radius: 0 22px 0 0;
  box-shadow: 12px -8px 30px rgba(19,65,88,.12);
}

@media (max-width: 900px) {
  .showcase .grid > .card:nth-child(even) .copy,
  .showcase .security-grid > .security-card:nth-child(even) .copy {
    grid-column: 1;
    grid-row: 1;
  }

  .showcase .grid > .card:nth-child(even) .visual,
  .showcase .grid > .card:nth-child(even) .diagram,
  .showcase .security-grid > .security-card:nth-child(even) .screen {
    grid-column: 1;
    grid-row: 2;
    margin: 18px 0 0 24px !important;
    border-right: 0;
    border-left: 2px solid var(--mint, #4fdbe2);
    border-radius: 22px 0 0;
    box-shadow: -12px -8px 30px rgba(19,65,88,.12);
  }
}