@import 'shared.css';

.about {
  max-width: var(--w-3xl);
  margin: var(--space-16) auto;
  padding-bottom: var(--space-32);

  .column {
    & > h3 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
      text-align: center;
    }

    &:first-of-type {
      float: left;
      width: 50%;
      padding-right: 1rem;
    }

    &:last-of-type {
      float: right;
      width: 50%;
      padding-left: 1rem;
    }
  }

  & > img {
    border-radius: var(--rounded-md);
    box-shadow:
      0 4px 6px -1px #ffffff9a,
      0 2px 4px -2px #ffffff9a;

    max-width: var(--w-sm);
    margin: var(--space-16) auto;

    &:hover {
      transform: scale(1.01);
      transition: transform 300ms;

      box-shadow:
        0 8px 10px -1px #ffffff9a,
        0 4px 6px -2px #ffffff9a;
    }
  }
}