index.module.css

a.cta {
    display: inline-block;
    /* background: linear-gradient(to bottom, #f5a0e7, #ffa6f1); */
    border: 2px solid #8e0000;
    text-decoration: none;
    border-radius: 9999px;
    color: #f24e4e;
    padding: 0.75rem 1.5rem;
    margin-top: 0.5rem;
    text-shadow: 0 1px 1px #00387838;
    box-shadow: 0 1px 2px #00295738;
    transition: all 0.2s ease;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  a.cta span {
    display: inline-block;
    transition: all 0.2s ease;
  }
  a.cta:hover span {
    transform: translateX(3px);
  }
  a.cta:hover {
    box-shadow: 0 5px 30px -10px #f5a0e7ab;
    filter: brightness(1.05);
  }
  a.cta:active {
    box-shadow: 0 1px 3px #00295738;
    filter: brightness(0.95);
  }
  a.cta:active span {
    transform: translateX(5px);
  }
  a.cta:focus-visible {
    outline: 2px solid hsl(var(--nextra-primary-hue) 100% 77%);
    outline-offset: 2px;
  }
  a.cta:focus-visible span {
    transform: translateX(3px);
  }
  
  .halfhalf {
    display: flex;
    align-items: center;
  }
  
  .halfhalf > * {
    /* Style for the items to take half width on larger screens */
    flex: 1;
    gap: 1rem;
  }
  
  .halfhalf p{
  align-items: center;
  }
  
  /* Media query for smaller screens (phones) */
  @media (max-width: 767px) {
    .halfhalf {
      flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    }
  
    .halfhalf > * {
      flex-basis: 100%; /* Take full width on smaller screens */
      margin-bottom: 1rem;
    }
  }