a3-global/style.scss

* {
  padding: 0;
  margin: 0;
  border: 0;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
nav,
footer,
header,
aside {
  display: block;
}
html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
  font-family: inherit;
}
button {
  background: transparent;
  border: 0;
}
input::-ms-clear {
  display: none;
}
button {
  cursor: pointer;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
a,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

body,
html {
  height: 100%;
  font-family: arial;
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  height: 45px;
  border-bottom: 2px solid rgb(161, 137, 0);
}

.logo {
  font-size: 24px;
  color: rgb(2, 2, 120);
  font-weight: 600;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: center;
}

.nav {
  display: flex;
  justify-content: space-between;

  &-header {
    width: 35%;
  }

  &__item {
    color: black;
    opacity: 0.7;
    transition: 0.2s;

    &_active {
      opacity: 1;
      position: relative;

      &::after {
        content: "";
        bottom: -14px;
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        background-color: rgb(128, 109, 1);
      }
    }

    &:hover {
      opacity: 1;
    }
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

main {
  flex: 1 1 auto;
}

.settings {
  padding-top: 15px;
  display: flex;
  justify-content: space-between;

  &-rest {
    width: 33.3%;
    display: flex;
    justify-content: space-between;
  }

  .sort {
    color: rgb(103, 103, 103);

    span {
      color: rgba(1, 1, 81, 0.711);
      text-decoration: underline;
    }
  }

  .calendar {
    position: relative;
    cursor: pointer;

    &::before {
      content: url("../icons/calendar1.svg");
      position: absolute;
      top: -2px;
      left: -20px;
      width: 15px;
      height: 15px;
    }
  }

  .ended {
    position: relative;
    cursor: pointer;

    &::before {
      content: url("../icons/toggle_off.svg");
      position: absolute;
      top: -6px;
      left: -30px;
    }
    text-align: end;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 23.7%);
  margin-bottom: 40px;
  grid-column-gap: 20px;
}

.card {
  width: 100%;
  font-size: 12px;
  margin: 15px 0;

  &__image {
    width: 100%;
  }

  &__title {
    font-weight: 600;
    margin-bottom: 5px;
  }

  &__describe {
    min-height: 84px;
  }

  &-inf {
    display: flex;
    justify-content: space-between;
    margin: 15px 0 10px 13px;

    &__item {
      font-size: 10px;
      position: relative;
      color: rgb(103, 103, 103);

      &::before {
        content: url("../icons/clock.svg");
        position: absolute;
        width: 10px;
        height: 10px;
        left: -13px;
      }
    }

    .date::before {
      content: url("../icons/calendar2.svg");
    }
  }

  .subscribe {
    display: inline-block;
    width: 100%;
    border: 1px solid rgba(1, 1, 81, 0.711);
    color: rgba(1, 1, 81, 0.711);
    font-size: 10px;
    height: 25px;
    transition: 0.2s;

    &:hover {
      color: white;
      background-color: rgba(1, 1, 81, 0.711);
    }
  }

  .more {
    text-decoration: underline;
    display: inline;
    color: rgb(30, 93, 189);
  }

  .themes {
    margin: 5px 0;
    font-size: 10px;
    text-transform: uppercase;
    display: flex;
    color: rgba(255, 166, 0, 0.566);

    &__name {
      padding: 3px 2px;
      border: 1px solid rgba(255, 166, 0, 0.566);
      margin-left: 5px;
    }

    li:first-child {
      margin-left: 0;
    }
  }
}

footer {
  padding: 15px 0;
  background-color: rgba(141, 97, 2, 0.468);
}

.footer {
  display: flex;
  justify-content: space-between;

  .text {
    padding-top: 15px;
    color: white;
    width: 30%;
  }

  .social {
    display: flex;
    justify-content: space-between;
    width: 60%;
  }

  .item {
    margin-right: 5px;
    a {
      display: block;
      width: 25px;
      height: 25px;
      border-radius: 3px;
      border: 1px solid rgba(1, 1, 81, 0.711);
      position: relative;
      transition: 0.2s;

      &:hover {
        transform: scale(1.1);
      }
    }

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 15px;
    }
  }

  .networks {
    width: 20%;

    .text {
      width: 100%;
      margin-bottom: 15px;
    }
  }

  .about {
    padding-top: 15px;
    color: white;
    width: 30%;

    &__column {
      display: grid;
      grid-template-columns: 40% 60%;
    }
  }
}

.similar {
  font-size: 24px;
  margin-top: 40px;
}

.card-description {
  display: grid;
  grid-template-columns: 15% 85%;
  margin-bottom: 20px;

  &__header {
    color: rgba(141, 97, 2, 0.468);
  }

  &__text {
    font-size: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(141, 97, 2, 0.468);
  }

  &__text.last {
    border-bottom: none;
  }
}

.about {
  &-card {
    background-color: rgb(36, 70, 107);
    padding: 25px 35px;
    margin: 30px 0;

    .card-inf__item {
      color: rgba(255, 255, 255, 0.626);
      margin-left: 15px;
    }

    .card-inf__item::before {
      left: -15px;
    }

    .date::before {
      content: url("../icons/calendar2.svg");
    }

    .people::before {
      content: url("../icons/people.svg");
    }
  }

  &__title {
    font-size: 28px;
    color: white;
    line-height: 1.3;
    margin-bottom: 15px;
  }

  &-more {
    display: flex;
    justify-content: space-between;
  }

  &__image {
    width: 400px;
  }

  &-text {
    color: rgba(255, 255, 255, 0.626);
    font-size: 14px;
    width: 55%;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.enroll {
  margin: 0 auto;
  width: 150px;
  padding: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.626);
  color: rgba(255, 255, 255, 0.626);
  transition: 0.2s;

  &:hover {
    background-color: rgba(255, 255, 255, 0.626);
    color: rgb(36, 70, 107);
  }
}

.see {
  font-weight: 600;
  width: 100%;
  border-top: 1px solid rgba(141, 97, 2, 0.468);
  border-bottom: 1px solid rgba(141, 97, 2, 0.468);
  margin-bottom: 20px;
  padding: 10px 0;
  transition: 0.2s;
  position: relative;

  &::after {
    content: url("../icons/arrow_right.svg");
    width: 30px;
    height: 10px;
    position: absolute;
    top: 3px;
    margin-left: 10px;
  }

  &:hover {
    background-color: rgba(141, 97, 2, 0.468);
  }
}

@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, 49%);
    grid-column-gap: 20px;
  }

  .about {
    &-more {
      flex-direction: column;
      align-items: center;
    }

    &__image {
      margin-bottom: 20px;
    }

    &-text {
      width: 100%;

      .card-inf__item {
        margin-top: 10px;
      }
      .enroll{
        margin-top: 10px;
      }
    }
  }
}

@media (max-width: 820px) {
  .settings-rest {
    width: 50%;
  }
  .nav-header {
    width: 50%;
  }
  .footer {
    .about {
      width: 40%;
    }
  }
}

@media (max-width: 640px) {
  header {
    height: 90px;
  }

  .header {
    flex-direction: column;
    justify-content: center;
    padding-top: 10px;
  }

  .nav-header {
    margin-top: 10px;
    width: 80%;
  }

  .sort {
    margin-top: 5px;
  }

  .settings-rest {
    flex-wrap: wrap;

    p {
      margin-left: 20px;
      margin-top: 5px;
    }

    .ended {
      margin-left: 27px;
    }
  }

  .about__image{
    width: 100%;
  }

  .logo {
    text-align: center;
  }
  .footer {
    display: block;

    .text {
      width: 100%;
    }

    .networks {
      width: 100%;
      margin: 0 auto;

      .text {
        text-align: center;
      }

      .social {
        width: 40%;
        margin: 0 auto;
      }
    }

    .about {
      width: 60%;
      margin: 0 auto;
    }
  }
}