ustvarjen template za kartice receptov

stylesheet.css

@@ -493,3 +493,91 @@ footer p {
     margin: 0 auto;
     padding: 3rem 1.5rem 5rem;
 }
+
+/*menu receptov*/
+
+/* kartice receptov */
+.recepti_jedi {
+    margin: 2rem;
+    padding: 1.5rem;
+    background-color: var(--barva-kartice);
+    border-radius:var(--zaobljenost);
+    box-shadow: var(--senca-kartice);
+}
+
+.recepti_jedi h2 {
+    text-align:center;
+}
+
+.recepti_grid {
+    display: grid;
+    grid-template-columns: repeat(2,minmax(0,1fr));
+    align-items: stretch;
+    gap: 0.5rem;
+
+}
+
+.o_receptu {
+    display:flex;
+    flex-direction: column;
+}
+
+.recepti_slika {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    position:relative;
+    min-height: 350px;
+    flex-shrink: 0;
+    overflow: hidden;
+    margin:0;
+}
+
+.recepti_slika img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.recepti_slika figcaption {
+    display:none;
+}
+
+.recepti_info ul {
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.recepti_info li {
+    display: block;
+    text-align: center;
+    font-size: 0.95rem;
+    max-width: 10rem;
+}
+
+.gumb_3 {   
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: var(--zaobljenost);
+    color: var(--barva-besedilo-na-temnem);
+    font-weight: 500;
+    text-decoration: none;
+    background-color: var(--barva-besedilo);
+}
+
+
+.gumb_3:hover {
+    background-color: var(--barva-dodatna);
+    color: var(--barva-besedilo);
+    transition: 0.2s;
+    font-weight: 500;
+}