diff --git a/components/PortfolioEntry.jsx b/components/PortfolioEntry.jsx
index 5243260..bf921c8 100644
--- a/components/PortfolioEntry.jsx
+++ b/components/PortfolioEntry.jsx
@@ -36,16 +36,8 @@ export default function PortfolioEntry({ title, description, url, image }) {
return (
-
-
+
+
diff --git a/styles/main.css b/styles/main.css
index a1c88e4..8d8069e 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -260,14 +260,6 @@ nav a:hover {
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
}
-
-.portfolio-entry-block img {
- width: 100%;
- height: 300px;
- object-fit: contain;
- object-position: left top;
- margin-bottom: 20px;
-}
/*############################################# -- Contact Forms */
form {
margin-top: 40px;
@@ -320,6 +312,23 @@ textarea {
margin-bottom: 3px;
}
+.portfolio-image-wrapper {
+ width: 100%;
+ height: 300px;
+ margin-bottom: 15px;
+ overflow: hidden;
+}
+
+.portfolio-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ width: 100%;
+ height: 300px;
+ object-position: left top;
+ margin-bottom: 20px;
+}
+
/* ###############################################################################################
##################################################################################################
##################################################################################################
@@ -360,9 +369,14 @@ textarea {
}
@media (max-width: 600px) {
- .portfolio-entry-block img {
- object-fit: cover;
- height: 200px;
+ .portfolio-image-wrapper {
+ height: auto;
+ }
+
+ .portfolio-image {
+ object-fit: contain;
+ height: auto;
+ margin: 0;
}
}