styles.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap');

:root {
  /* Colors */
  --white: #FFF;
  --light-gray: #F2F2F8;
  --dark-gray: #CECFE0;
  --black: #000;
  --css: hotpink;
  --javascript: yellow;
  /* Margins */
  --m-0: 0;
  --m-8: 0.8rem;
  --m-16: 1.6rem;
  --m-24: 2.4rem;
  --m-32: 3.2rem;
  --m-40: 4.0rem;
  --m-48: 4.8rem;
  --m-56: 5.6rem;
  --m-64: 6.4rem;
  --m-80: 8rem;
  --m-160: 16rem;
  /* Paddings */
  --p-0: 0;
  --p-2: 0.2rem;
  --p-4: 0.4rem;
  --p-8: 0.8rem;
  --p-16: 1.6rem;
  --p-24: 2.4rem;
  --p-32: 3.2rem;
  --p-40: 4.0rem;
  --p-48: 4.8rem;
  --p-56: 5.6rem;
  --p-64: 6.4rem;
  --p-80: 8rem;
  --p-160: 16rem;
  /* Font Sizes */
  --f-12: 1.2rem;
  --f-14: 1.4rem;
  --f-16: 1.6rem;
  --f-24: 2.4rem;
  --f-32: 3.2rem;
  /* Radius */
  --r-none: 0; 
  --r-sm: 0.8rem; 
  --r-md: 1.6rem; 
  --r-lg: 2.4rem; 
  --r-full: 50%; 
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.quizzes-container {
  background-attachment: fixed;
  background-image: url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=716&q=80);
  padding: var(--m-0) var(--m-160);
}

.quizzes-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: var(--m-24);
}

.quizzes-header img {
   width: 50%;
   padding: 60px 0px 40px;
}

.quizzes-header h1 {
  font-size: var(--f-32);
  font-weight: 700;
  margin: var(--m-0);
  padding-bottom: var(--p-24);
}

.quizzes-header div {
  margin-left: var(--m-16);
}

.quizzes-main {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding-top: var(--m-24);
}

.quizzes-main a {
  box-shadow: 0 0 11px rgba(33,33,33,.2);
  border-radius: var(--r-md);
  color: var(--black);
  cursor: pointer;
  margin-left: var(--m-40);
  padding: var(--p-16) var(--p-16) var(--p-16) var(--p-64);
  position: relative;
  text-decoration: none;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.quizzes-main a:hover {
  box-shadow: 0 0 4px rgba(33,33,33,.2);
}

.quizzes-main img {
  height: 100%;
  left: -40px;
  position: absolute;
  top: 0;
  width: 100px;
}

.quizzes-main p {
  border-radius: var(--r-sm);
  display: inline;
  padding: var(--p-2) var(--p-8);
}

.quizzes-main span {
  display: block;
  text-align: right;
}

.quizzes-main p, .quizzes-main span {
  color: var(--black);
  font-size: var(--f-12);
  font-weight: 500;
  margin: var(--m-0);
}

.quizzes-main h2 {
  font-size: var(--f-16);
  font-weight: 500;
  margin: var(--m-16) var(--m-0) var(--m-24);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quizzes-footer {
  font-size: var(--f-12);
  padding: var(--p-32);
  text-align: center;
}

@media (min-width: 1440px) {
  .quizzes-container {
    padding: var(--m-0) var(--m-160);
  }
}

@media (max-width: 1128px) {
  .quizzes-container {
    padding: var(--m-0) var(--m-160);
  }
}

@media (max-width: 950px) {
  .quizzes-container {
    padding: var(--m-0) var(--m-80);
  }
  .quizzes-header img {
    width: 80%;
  }
}

@media (max-width: 744px) {
  .quizzes-container {
    padding: var(--m-0) var(--m-24);
  }
  .quizzes-header img {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .quizzes-container {
    padding: var(--m-0) var(--m-24);
  }
  .quizzes-header img {
    width: 100%;
  }
}