/* Team 4
    Craig Collins (1038789)
    James Fallouh (6171620)
    SeyedehFatemeh Fekribaygi (6284424)

    Current Date: TBD
    Filename: Custom.CSS

    Purpose: This is the main Sass stylesheet file.
    .
*/
/*

Example SCSS syntax

Syntax for importing additional scss files
@import './file';

Syntax for using scss variables 
body {
    background: $primary-color;
    color: $text-color;
}

@function weight($weight-name) {
    @return map-get($font-weights, $weight-name);
}

*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  position: relative;
}

.container .article {
  flex: 0 0 calc(33.33% - 20px);
  max-width: calc(33.33% - 20px);
  margin-bottom: 20px;
  position: relative;
}

.container .article .content {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.container .article .content a {
  text-decoration: none;
}

.container .article .content a img {
  width: 100%;
  height: auto;
}

.container .article .content .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1F79FD;
  border: 1px solid black;
}

.container .article .content .overlay h2 {
  color: white;
  font-family: serif;
  margin: 0;
  text-align: center;
  text-transform: capitalize;
  font-weight: bold;
  background-color: #1F79FD;
  line-height: 1;
  padding: 5px;
}

.container .article:nth-child(odd) {
  background-color: transparent;
}

.container .article:nth-child(odd) .content .overlay {
  background-color: transparent;
}

.container .article:nth-child(even) {
  background-color: lightgrey;
}

.container .article:nth-child(even) .content .overlay {
  background-color: #1F79FD;
}

@media only screen and (max-width: 768px) {
  .container .article {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}
@media only screen and (max-width: 480px) {
  .container .article {
    flex: 0 0 100%;
    max-width: 100%;
  }
}/*# sourceMappingURL=main.css.map */