@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body{
  background-image: radial-gradient(#1f2b94,#151B54);
  color: #fff;
}
h3{
  font-size: 36px;
  font-family:'Playfair Display', sans-serif;
}
.header{
  text-align: center;
  margin: auto;
}
section{
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  margin-left:auto;
  margin-right: auto;
}
.container {
  position: relative;
}

.image {
  display: block;
  width:200px;
  height: auto;
}
img{
  width:320px;
  height:180px;
}

.overlay {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  width: 320px;;
  opacity: 0;
  transition: .5s ease;
  background-color: #333;
}

.container:hover .overlay {
  opacity: .8;
}

.text {
  color: white;
  font-size: 20px;
  font-family: 'Playfair Display', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

a {
  color: aqua;
}

p{
  font-size: 20px;
}

.source{
  color: white;
  font-size: 16px;
  font-family: 'Playfair Display', sans-serif;
  position: absolute;
  left: 23%;
  text-align: center;
}

@media screen and (min-width:601px) and (max-width:800px){

}

@media screen and (min-width:801px) and (max-width:1140px){

}

@media screen and (min-width:1141px) and (max-width:1750px){
  
}