add second page

style.scss

@@ -191,20 +191,20 @@ main {
   }
 }
 
-.cards{
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
+.cards {
+  display: grid;
+  grid-template-columns: repeat(4, 23.7%);
   margin-bottom: 40px;
+  grid-column-gap: 20px;
 }
 
 .card {
-  width: 240px;
+  width: 100%;
   font-size: 12px;
   margin: 15px 0;
 
   &__image {
-    width: 240px;
+    width: 100%;
   }
 
   &__title {
@@ -212,7 +212,7 @@ main {
     margin-bottom: 5px;
   }
 
-  &__describe{
+  &__describe {
     min-height: 84px;
   }
 
@@ -241,6 +241,7 @@ main {
   }
 
   .subscribe {
+    display: inline-block;
     width: 100%;
     border: 1px solid rgba(1, 1, 81, 0.711);
     color: rgba(1, 1, 81, 0.711);
@@ -343,3 +344,117 @@ footer {
     }
   }
 }
+
+.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);
+  }
+}