@import url(/common/css/common.css);

.soon-wrapper {
  margin-block: var(--w-xl);
  margin-inline: auto;
  width: fit-content;

  font-size: var(--f-xxl);

  padding: var(--w-l);
  border-radius: var(--w-l);
}

.socials-heading {
  font-weight: normal;
  margin-left: var(--w-m);
}

.socials-wrapper {
  display: flex;
  gap: var(--w-m);
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .socials-item {
    min-width: 300px;
    height: 150px;
    border-radius: var(--w-l);
    position: relative;
    overflow: hidden;

    .handle {
      position: absolute;
      top: 50%;
      left: var(--w-xl);
      transform: translateY(-50%);
      font-size: var(--f-xl);
      color: var(--on-container);
      z-index: 1;
    }

    .brand-name {
      position: absolute;
      top: var(--w-m);
      left: var(--w-m);
      color: var(--secondary-on-container);
    }

    .brand-logo {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 10em;
      transition: 200ms;
      color: var(--secondary-on-container);
      transform: translate(50%, 50%) rotate(-20deg);
    }

    &:hover .brand-logo {
      transform: translate(30%, 30%);
    }
  }
}