@import '../../node_modules/reset-css/sass/reset';

$accentColor: #ef570c;

body {
  font-family: 'main';
}

@font-face {
  font-family: 'logo';
  src: url('../fonts/logo.ttf');
}

@font-face {
  font-family: 'main';
  src: url('../fonts/main.otf');
}

.container {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: 4rem 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "header header"
    "sidebar content";

  min-height: 100vh;
  padding: 0 2rem;
}

.sidebar {
  grid-area: sidebar;
}

.header {
  grid-area: header;
  justify-content: center;
}

.main {
  grid-area: content;
}

.main,
.header,
.sidebar {
  display: flex;
  align-items: center;
}

.menu {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;


  li {
    padding: 0.5rem 0;

    a {
      text-decoration: none;

      &,
      &:hover,
      &:active,
      &:visited {
        color: $accentColor;
      }
    }
  }
}

.model {
  max-width: 33vw;
}

.product {
  gap: 1rem;

  &-image {
    flex-basis: 50%;
    flex-shrink: 0;
  }
}

.logo {
  &-header {
    font-family: 'logo';
    font-size: 3rem;
  }

  &-img {
    width: 54%;
    display: block;
    margin: auto;
  }
}

img {
  max-width: 100%;
}