.block__donation {
	padding-bottom: 60px;

	h1 {
		font-size: 48px;
		color: var(--color__main);
	}

	form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3px;
		background: var(--color__bronze);
		border: 3px solid var(--color__bronze);

		h2 {
			font-size: 18px;
			font-weight: 700;
			color: var(--color__main);
		}

		.form__field {
			background: var(--color__beige);
			padding: 15px;

			&:not(.form__field--total) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 15px;
			}

			&.form__field--total {
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			&.form__field--wide {
				grid-column: span 2;
			}
		}

		.field__image {
			aspect-ratio: 10 / 7;
			width: 100%;
			position: relative;
			overflow: hidden;

			img {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
				object-position: center;
				height: 100%;
				width: 100%;
			}
		}

		.field__input {
			display: flex;
			flex-direction: column;

			.input-wrapper {
				margin-top: auto;
			}

			label {
				color: var(--color__black);
				display: inline-block;
				margin-bottom: 7.5px;
			}

			input {
				display: block;
				padding: 7.5px;
				width: 100%;
			}

		}
	}

}

@media (max-width: 960px) {

	.block__donation {

		form {

			.form__field {

            	&:not(.form__field--total) {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}

@media (max-width: 640px) {

	.block__donation {

		form {
			grid-template-columns: 1fr;

			.form__field {

            	&:not(.form__field--total) {
					grid-template-columns: 1fr 1fr;
				}
			}
		}
	}
}

@media (max-width: 480px) {

	.block__donation {

		form {

			.form__field {

            	&:not(.form__field--total) {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}